keep-alive遇见vue-router

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了keep-alive遇见vue-router相关的知识,希望对你有一定的参考价值。

保证组件活着
keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,避免组件重新渲染,频繁创建销毁,router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会被缓存

keep-alive有两个非常重要的属性
include -- 字符串或正则表达,只有匹配的组件才会被缓存
exclude --字符串或正则表达,任何匹配的组件都不会被缓存

<keep-alive exclude="profile,user">
        <route-view/>
</keep-alive>

这两个函数只有组件使用了keep-alive时才有效

activated(){
   console.log("当前组件活跃")
}
deactivated(){
   console.log("当前组件不活跃")
}

以上是关于keep-alive遇见vue-router的主要内容,如果未能解决你的问题,请参考以下文章

vue-router使用keep-alive动态缓存页面。

vue-router 之 keep-alive

vue-router 之 keep-alive路由缓存处理include+exclude

vue.js+vue-router+webpack keep-alive用法

vue-router 之 keep-alive

Vue-Router第三弹-全局导航守卫keep-alive