Vue Router系列之（十）缓存路由组件

缓存路由组件

完善路由的技巧

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

   ​ 正常情况下，进行了路由跳转后，之前的组件会被销毁，如果之前的组件中存在input框之类的表单类组件，输入的内容也就消失了，也就是说，要保证路由跳转后不销毁之前的组件

2. 具体编码：

   // 缓存的对象：并不是所有路由组件都需要缓存，只有进行路由跳转后要保留当时真实DOM中数据的路由组件才需要进行缓存，缓存的路由组件不会被销毁
   // 1. 确定要缓存的路由组件最终是展示在哪个展示区的，找到那个展示区
   // 2. 用<keep-alive>标签包裹<router-view>，并添加include属性
   
   <!-- 缺少include属性，会缓存该展示区的所有组件-->
   <!-- include="组件名"【这里的组件名指组件文件中的name属性的值】-->
   
   <!--<keep-alive include="News"> 缓存展示区中的某个路由组件-->
   <!--<keep-alive :include="['News','Message']"> 缓存展示区中的多个路由组件-->
   <keep-alive> 缓存展示区中的所有路由组件
       <router-view></router-view>
   </keep-alive>