一、keep-alive
能够让组件不再频繁地创建频繁地销毁,能够提高性能
二、keep-alive使用
在App.vue中用该标签包含主
<keep-alive>
<router-view></router-view>
</keep-alive>
-
keep-alive包含两个重要的属性
-
include和exclude
-
实现:我们希望每次进入档案都刷新一下
<keep-alive exclude="Profile"> <router-view></router-view> </keep-alive> // 如果有多个 <keep-alive exclude="Profile,User"> <router-view></router-view> </keep-alive>
-
三、延伸的问题
keep-alive可以保存上个组件不被销毁,那么上个组件的状态如何保存呢?
例如:
此处我们点到了消息,再次跳转到关于,如果我再次点击首页,能否让其显示还是消息,而不是默认的新闻
-
解决方案:
-
在Home.vue中的data()添加path路径,用来记录默认的新闻路径,然后利用actived()函数通过this.$router.push(this.path)自动显示新闻,紧接着,我们利用beforeRouteLeave(to, from, next),将当前路由的path传给data中的path,进行保存,那么下一次回来actived调用的便是该path
-
实现:
// Home.vue <template> <div> <h2>我是首页</h2> <p>我是首页内容哈哈哈</p> <router-link to="/home/news">新闻</router-link> <router-link to="/home/message">消息</router-link> <!-- 添加子组件的router-view--> <router-view></router-view> </div> </template> <script> export default { name: "Home", data(){ return{ path: '/home/news' } }, created() { }, activated() { // 路由跳转 // 只有<keep-alive>使用的时候才有效 this.$router.push(this.path) }, beforeRouteLeave(to, from, next) { // 在离开当前路由之前将当前路由path给到data中的path // this.path = this.$route.path this.path = from.path next() } } </script> <style scoped> </style>
-