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