方法一
给 router-view 设置 key 属性为路由的完整路径
<keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
- 可能对性能造成一定损耗。不适用于一个tab切换路由并加载列表的组件,会造成页面白屏,dev模式不会自动刷新
方法二
- 通过 watch 监听路由变化,做判断路由路径然后调用响应的方法
watch:{
'$route'(){
if(this.$route.path==='test'){
this.test();
}
}
}
watch:{
'id':{
handler:'test',//调用方法
immediate:true,//进入立即执行一次
}
},
方法三
- 通过组件导航守卫来设置对应的meta 属性
beforeRouteEnter: (to, from, next) => {// 写在当前组件
to.meta.keepAlive = false
next()
},
beforeRouteLeave: (to, from, next) => {//写在前一个组件
to.meta.keepAlive = false
next()
},