72 缓存路由组件

缓存路由组件是一个完善路由的技巧。

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

案例演示

给一个路由各一个input框，输入内容，当切换路由的时候input框里面的内容消失了，这是因为路由被销毁了

这里我切到了点了下message，也就是切到了messgae组件

但是我想要保留这些数据，不希望组件被销毁

keep-alive标签

这时候可以借助keep-alive标签，在要展示的组件的地方进行keep-alive进行修饰

这样就能完成切换路由不被销毁，但是所有的路由都被keep-alive标签进行缓存了

include属性

这时候可以借助include属性，精准告诉路由器要缓存哪个路由，值为组件的名称

incluede缓存多个组件

如果要缓存多个，可以使用数组的写法

<!-- 缓存一个路由组件 -->
            <!-- <keep-alive include="News">
                <router-view></router-view>     
            </keep-alive> -->
            <!-- 缓存多个路由组件 -->
            <keep-alive  :incluede="['News','Message']">
                <router-view></router-view>     
            </keep-alive>

总结

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

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