使用vue-router切换组件时使组件不销毁
默认地,使用vue-router切换组件时,离开的组件会被销毁,新进入地组件会创建。那么,有时候,我们希望离开的组件不要被销毁。这时就需要使用到keep-alive标签来缓存组件。1、用keep-alive包裹router-view在router-view标签外包裹keep-alive使用v-if来判断一下,否则所有的组件都会销毁或者不销毁。判断的条件来自于路由定义时的meta字段<keep
·
默认地,使用vue-router切换组件时,离开的组件会被销毁,新进入地组件会创建。
那么,有时候,我们希望离开的组件不要被销毁。这时就需要使用到keep-alive标签来缓存组件。
1、用keep-alive包裹router-view
- 在router-view标签外包裹keep-alive
- 使用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取出。
更多推荐
已为社区贡献5条内容
所有评论(0)