vue52 —— keep-alive 和 router-link 以及 actived，beforeRouteLeave

最新推荐文章于 2023-01-18 17:06:04 发布

原创最新推荐文章于 2023-01-18 17:06:04 发布 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

vuejs 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了Vue的内置组件keep-alive及其include、exclude属性，用于保留组件状态和避免重新渲染。同时，讨论了router-link在keep-alive中的作用，如何实现特定路由组件的缓存。当从其他组件返回时，home组件依然能保持之前的状态，如消息显示。文章还提及在App.vue和Home.vue中如何配置以达到预期效果。

keep-alive 是Vue里的一个内置组件，可使被包含的组件保留状态，或避免重新渲染

两个属性： include， exclude

include：字符串或正则表达式，匹配的组件才会被缓存
exclude：字符串或正则表达式，匹配的组件都不会被缓存

eg. 要设置多个时，加逗号，不能有空格

<keep-alive exclude='User,Profile'> 
	<router-view/>
</keep-alive>

可通过created，destroyed证明

router-link 是vue-router里的一个内置组件，若直接被包含在keep-alive里，所有路径匹配到的视图组件会被缓存

要求，保存home，点击了消息，去了别的组件回来home后，依旧显示消息

——（后期可以使用currentIndex实现）

App.vue:

注意： keep-alive 在App.vue中使用

	<keep-alive>
      <router-view></router-view>
    </keep-alive>

把index.js中home路由里children中设置的重定向（默认路由）去掉
在Home.vue中设置path，回调函数activated，beforeRouteLeave

Home.vue：

data(){
    return {
      path: '/home/news'
    }
  },
  activated(){
    // console.log('home activated');
    this.$router.push(this.path) 
  },
  
  beforeRouteLeave(to,from,next){
    // console.log(this.$route.path);
    this.path = this.$route.path
    next()
  }