背景:想弄一个路由跳转时,保留当前页面数据,不然每次跳转回来后,就要重新写一遍,太麻烦了。
发现vue的<keep-alive>
标签,与<router-view>
标签搭配使用,可以达到目的。
//在.vue文件中,使用<keep-alive>标签包裹<router-view>标签
<keep-alive>
<router-view></router-view>
</keep-alive>
//这样就可以将路由跳转页面缓存起来
//有时候,我们不一定需要缓存全部页面,只有部分页面需要缓存
<keep-alive>
<router-view v-if="false"></router-view>
</keep-alive>
//将不需要缓存的路由隐藏掉就行了,这边推荐使用动态的控制方式
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//动态控制,其中$route.meta.keepAlive数据来源设置在以下配置中
index.js中设置路由跳转是否缓存
new Router({
routes: [
{
path: '/a',
name: 'A',
component: A,
children: [
{
path: "/b",
name: "B",
component: B,
meta: {
keepAlive: false
}
},
{
path: "/c",
name: "C",
component: C,
meta: {
keepAlive: true
}
}
]
]
})
可能有人会和我一样想到如何清缓存的问题,不然大量的缓存存在你的本地,这样就很不行了。
ps:路由跳转页面数据缓存只是临时缓存,当我们刷新页面时,这些缓存就会被自动清空,也是在跳转到新页面时,再跳转回来,这些缓存也会被清空。
感慨:我一个后端服务开发人员,经过这一个月的前端vue开发,也算半个前端开发人员,多学点,准没错,哈哈哈