vue 组件缓存 router-view 详解

标签：share   keepalive   view   ide   java   tag   org   efault   book   

记录一下：

我们在特定的情况下强制刷新某些组件

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

vue 组件缓存 router-view 详解

标签：share   keepalive   view   ide   java   tag   org   efault   book   

原文地址：https://www.cnblogs.com/xiangsj/p/13816495.html