从A路由跳转B路由,A路由需要缓存A,也就是返回后A数据还存在, 但是从A跳转至其他路由不缓存。
A B路由表示任意路由不是单独的一个。
一个路由缓不缓存一般是由两个东西决定的:
一个就是<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);
以达到自定义控制组件(路由)视图的目的。
###<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
###我觉得你可以结合以上两位给的方案,
然后通过路由导航守卫beforeEach,在跳转的时候判断一下接下来的页面是否需要A页面缓存,
如果需要就存到keepAlive的include里面