Vue-router缓存路由组件

1. 缓存路由组件

   1. 作用：让不展示的路由组件保持挂载，不被销毁

      <keep-alive include="News"> 
          <router-view></router-view>
      </keep-alive>

      通过<keep-alive>  ··· </keep-alive> 标签实现 标签内的组件会被缓存起来 切换之后不会被销毁

      include属性可以指定需要缓存的组件 不会把所有组件都缓存

      如果有多个组件需要缓存 可以把值写成数组的形式:

      // 缓存多个组件的写法
      <keep-alive include="['News', 'Message']"> 
          <router-view></router-view>
      </keep-alive>

   2. 代码演示
      1. 我们在app组件种写了两按钮 点击跳转路由展示对应的组件 我们通过<keep-alive>标签和 include属性给Home组件设置了缓存

         <template>
           <div>
             <button @click="showHome">点击显示Home组件</button>
             <button @click="showMessage">点击显示Message组件</button>
             <keep-alive include="Home">
               <router-view></router-view>
             </keep-alive>
           </div>
         </template>

         我们分别给两个路由组件添加了 beforeDestroy()生命周期钩子 在组件即将销毁前打印一些信息

         // Home组件内部的生命周期函数
         beforeDestroy() {
             // 销毁之前的生命周期函数
             console.log('home组件销毁了');
         },
         
         // Message组件内部的生命周期函数
         beforeDestroy() {
             // 销毁之前的生命周期函数
             console.log('message组件销毁了');
         },

         在浏览器中打开我们分别切换了两个组件 我们可以在控制台上看到 只有Message组件内的生命周期钩子被执行了 而Home组件内的钩子并没有被执行

          这就说明我们在<keep-alive>标签和 include属性给Home组件设置的缓存生效了，而Message组件没有设置缓存 所以执行了销毁前的钩子