需求:后台管理系统,切换菜单时需要一部分页面刷新,一部分不刷新(其实就是组件销毁问题)
首先,我们需要在router-view标签外再包上一层标签keep-alive
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
这里使用v-if来判断一下,否则所有的组件都会销毁或者不销毁
其次,需要在router.js配置中添加meta字段 (keepAlive字段默认值是false)
{
path:'/system',
component:system,
name:'system',
meta:{ keepAlive: true}
},
{
path:'/log',
component:log,
name:'log',
meta:{ keepAlive: false}
},
配置好就可以了。