Vue——keep-alive和记忆之前的状态

一、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>