一、情景说明
我们的页面中
可能同时存在多个路由组件需要切换
有些路由组件中有input
等输入框,当输入了内容后,点击其他组件按钮
再次切换回来时,内容被清空了
这样,用户体验就很差
这里,就用到路由组件缓存技术
二、案例
home
组件中,有两个路由组件可以切换
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
缓存一个路由组件
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
缓存多个路由组件
<keep-alive :include="['News','Message']">
三、注意事项
1、keep-alive
的include
属性里写的是组件名称。
2、被keep-alive
缓存的组件,它的beforeDestroy
不会被执行。