vue 路由 按需 keep-alive
1.把需要缓存和不需要缓存的视图组件区分开
思路如下图:
- 写2个
router-view
出口
<keep-alive> <!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
复制代码
- 在
Router
里定义好需要缓存的视图组件
new Router({ routes: [
{
path: '/',
name: 'index',
component: () => import('./views/keep-alive/index.vue'),
meta: {
deepth: 0.5
}
},
{
path: '/list',
name: 'list',
component: () => import('./views/keep-alive/list.vue'),
meta: {
deepth: 1
keepAlive: true //需要被缓存
}
},
{
path: '/detail',
name: 'detail',
component: () => import('./views/keep-alive/detail.vue'),
meta: {
deepth: 2
}
}
]
})
复制代码
2.按需keep-alive
我们从官方文档提供的api入手,
keep-alive
组件如果设置了 include
,就只有和 include
匹配的组件会被缓存,
所以思路就是,动态修改 include
数组来实现按需缓存。
<keep-alive> <!-- 需要缓存的视图组件 -->
<router-view :include="include" v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
复制代码
让我们在app.vue里监听路由的变化,
export default { name: "app",
data: () => ({
include: []
}),
watch: {
$route(to, from) {
//如果 要 to(进入) 的页面是需要 keepAlive 缓存的,把 name push 进 include数组
if (to.meta.keepAlive) {
!this.include.includes(to.name) && this.include.push(to.name);
}
//如果 要 form(离开) 的页面是 keepAlive缓存的,
//再根据 deepth 来判断是前进还是后退
//如果是后退
if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
var index = this.include.indexOf(from.name);
index !== -1 && this.include.splice(index, 1);
}
}
}
};
复制代码
需要注意的是
keep-alive
需要其包裹的组件有name属性,
我们上面的代码中的 push
和 splice
的是 router
的 name
。
所以建议大家把 route
的 name
属性设置和 route
对应component
的name
设成一样的。
result
让我们验证一下我们的成果
在 vue-devtool 里,灰色的组件,代表是缓存状态的组件,注意观察list
的变化。
写在最后
- 实现按需
keep-alive
,网上有方法,通过修改route
配置里的meta
里的keepAlive
值来实现。
直接修改 meta
的值,可能会出现上图的情况,keep-alive里有一直有一个缓存的 list,正常的 rotuer-view
里也有一个,
链接:https://juejin.im/post/5cdcbae9e51d454759351d84
以上是 vue 路由 按需 keep-alive 的全部内容, 来源链接: utcz.com/z/377482.html