使用vue-router切换组件时使组件不销毁

默认地,使用vue-router切换组件时,离开的组件会被销毁,新进入地组件会创建。
那么,有时候,我们希望离开的组件不要被销毁。这时就需要使用到keep-alive标签来缓存组件。

1、用keep-alive包裹router-view

  1. 在router-view标签外包裹keep-alive
  2. 使用v-if来判断一下,否则所有的组件都会销毁或者不销毁。判断的条件来自于路由定义时的meta字段
 <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

2、定义路由meta字段

如下,DAC_module路径下,有meta字段,且keepAlive的值是true,那么这个路径的路由就会在路由切换时不销毁组件。
而ADC_module路由就会在切换时销毁组件。

{
          path:'/DAC_module',
          component:() => import(/* webpackChunkName: "DacModule" */ '../components/DacModule/DacModule.vue'),
          meta:{ keepAlive: true}
        },
        {
          path:'/ADC_module',
          component:() => import(/* webpackChunkName: "AdcModule" */ '../components/AdcModule/AdcModule.vue'),
        },

3、keep-alive的原理

在created的时候,将需要缓存的vnode节点放到cache中,在render的时候,根据name取出。


版权声明:本文为longtengg1原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。