vue 组件缓存 router-view 详解

记录一下：

都会缓存，那我们在特定的情况下强制刷新某些组件：

1. 利用include、exclude属性

   <keep-alive include="bookLists,bookLists"> <router-view></router-view> </keep-alive> <keep-alive exclude="indexLists"> <router-view></router-view> </keep-alive> 

   include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存

2. 利用meta属性

   export default[ { path:'/', name:'home', components:Home, meta:{ keepAlive:true //需要被缓存的组件 }, { path:'/book', name:'book', components:Book, meta:{ keepAlive:false //不需要被缓存的组件 } ] 

   <keep-alive> <router-view v-if="this.$route.meat.keepAlive"></router-view> <!--这里是会被缓存的组件--> </keep-alive> <keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive> <!--这里是不会被缓存的组件--> 

3. 官方提出的解决方案响应路由参数的变化

4. 利用berforeRouteEnter实现前进刷新，后退缓存资料

5. 利用第三方插件实现前进刷新，后退不缓存

 

参考: https://www.cnblogs.com/Mr-Rshare/p/10729497.html