vue keep-alive
Posted lwx521
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue keep-alive相关的知识,希望对你有一定的参考价值。
在初始vue路由的时候,需求是离开组件即销毁,但是现在要求再次返回组件时可以看到上次的内容,所以就与keep-alive相识
keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,更详细的请参考这篇博客 https://www.jianshu.com/p/0b0222954483
开始设置如下:
APP.vue
<div id="app">
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
router.js
name:‘dashboard‘,
path: ‘/dashboard‘,
component: resolve => require([‘../components/page/Dashboard.vue‘], resolve),
meta: keepAlive:true,title: ‘首页‘ ,
menu: ‘dashboard‘ //页面需要的权限
,
本意就是通过路由表meta里的keepAlive属性判断路由是否需要缓存,但不知道为何未生效?
我的路由是"vue-router": "^3.0.1",
查了好久资料也未找到办法,无奈只能改变方法,使用include/exclude
APP.vue
<keep-alive include="powerType,instantPowerAnalyze"> <router-view></router-view> </keep-alive>
在每个路由里添加name,注意name与data同级
export default
name:"powerAnalyze",
data()
以上是关于vue keep-alive的主要内容,如果未能解决你的问题,请参考以下文章
683 vue3的动态组件,keep-alive,缓存组件的生命周期,异步组件和Suspense,$refs,$parent和$root,生命周期,组件的v-model