vue 使用keep-alive设置页面缓存失效

Question

使用keep-alive 设置页面缓存，代码如下：
App.vue

 <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>

路由配置代码：

export default [
    {
        path: "/",
        redirect: "/car/list"
    },

    {
        path: "/car/list",
        component: () => import("@/views/car/list"),
        name: "car-list",
        meta: {
            keepAlive: true
        }
    },
    {
        path: "/car/detail",
        component: () => import("@/views/car/detail"),
        name: "car-detail",
        meta: {
            keepAlive: true
        }
    }
];

这两个页面的name也设置了，分别是：

  name: 'car-list',

 name: 'car-detail',

按理这两个页面设置缓存应该是成功的，但是运行后是失败的，返回这两个页面都是重新请求数据，执行created方法。

另一个神奇的现象是，我设置一个页面keep-alive时，页面缓存是成功的。比如配置文件为：

export default [
    {
        path: "/",
        redirect: "/car/list"
    },

    {
        path: "/car/list",
        component: () => import("@/views/car/list"),
        name: "car-list",
        meta: {
            keepAlive: true
        }
    },
    {
        path: "/car/detail",
        component: () => import("@/views/car/detail"),
        name: "car-detail"
    }
];

这种情况下，页面缓存成功。

请教下各位大佬，有没有人遇到过这种问题，或者可不可以提供个思路，谢谢

Answer 1

找到原因了，跟keep-alive无关。是自己的坑。
自己的代码中使用了window.location.href=xxx或者window.location.reload()方法，导致页面刷新了，之前缓存的组件全部失效

Answer 2

今天也踩到这个坑，供大家参考。
解决方案：
排查下来发现，是我在页面中使用标签跳转，点击浏览器后退无法缓存前一个页面，将<a>改为使用<router-link>就解决了。
思路：
点击跳转时观察浏览器的console发现，其他页面在跳转后console中的日志没有被清空而是直接puhs到之前日志后面的，但无法缓存的这个页面点击跳转console直接清空了，所以我就把触发bug的原因定位到跳转上了。