vue路由缓存问题

Question

从A路由跳转B路由，A路由需要缓存A，也就是返回后A数据还存在， 但是从A跳转至其他路由不缓存。
A B路由表示任意路由不是单独的一个。

Answer 1

一个路由缓不缓存一般是由两个东西决定的：

一个就是<router-view> 上的key,
这个key默认就是path，形如\xx\user的路径，
但这会导致一个问题，当一个参数是以GET方式传入的时候(比如\xx\user?id=1、\xx\user?id=2)，可能导致信息不会更新，因为组件会复用，导致相关钩子不更新。
这个时候 可以给 router-view的key改成$route.fullPath。

另外还可以通过keep-alive组件来额外控制一个view是否缓存，它有个include属性很有用.
形如：

<keep-alive :include="keepAliveRoutes">
    <router-view :key="$route.fullPath"/>
</keep-alive>

这个include就可以自定义哪些组件需要缓存。
我们可以在Vue状态机里记录需要缓存的路由，
然后在 需要的条件 下去更新这个值就能实现自定义缓存路由视图。

举个比方：
有时候我们可能会有多标签打开关闭的需求，有些标签需要缓存，有些则不需要
这个时候，我们会在 特定的 条件下去更新状态机这个keepAliveRoutes的值
就类似这样 :

state.keepAliveRoutes.push(componentName);
state.keepAliveRoutes.splice(componentNamePositionIndex, 1);

以达到自定义控制组件（路由）视图的目的。

Answer 2

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

const routes = [
    {
        path: A,
        name: A,
        component: A,
        meta: {
            keepAlive: true,
        },
    },
    {
        path: B,
        name: B,
        component: B,
        meta: {
            keepAlive: false,
        },
    },
]

这样就可以了, 给A路由加上keep-alive

Answer 3

我觉得你可以结合以上两位给的方案，
然后通过路由导航守卫beforeEach,在跳转的时候判断一下接下来的页面是否需要A页面缓存，
如果需要就存到keepAlive的include里面