1.在路由表定义meta属性
{
path: '/',
meta:{
keepAlive: false, // 需要被缓存
},
name:'index',
component: require('@/views/index').default
},
{
path: '/order',
meta:{
keepAlive: true,
},
name:'order',
component: require('@/views/order/index').default
},
{
path: '/order/detail',
meta:{
keepAlive: false,
},
name:'order-detail',
component: require('@/views/order/detail').default
},
2.在app.vue中用keep-alive包裹router-view
<div class="main">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="key"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>
</div>
3.在订单列表页离开时吧,判断不需要缓存组件,清楚一下已缓存的组件;
beforeRouteLeave (to, from, next) {
if(to.path!=='/order/detail'){
this.$vnode.parent.componentInstance.cache={};
this.$vnode.parent.componentInstance.keys=[];
}
next();
},