vue路由缓存
一、先设置路由模块元:{ path:'/ category', name:'Category', component:Category, meta:{ keepAlive:true } }二、其次对路由器视图视图层修改:<keep-alive> &a
path:'/ category',
name:'Category',
component:Category,
meta:{
keepAlive:true
}
二、其次对路由器视图视图层修改:
<keep-alive>
<router-view v-if =“$ route.meta.keepAlive”/>
</ keep-alive>
<router-view v-if =“!$ route.meta.keepAlive”/>
三、然后对进入路由的页面进行判断:
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = to.name == 'Detail';
next();
}
四、可以进行对比,进入路由的操作判断:
例如如果进入详情页,进行了删除等操作的时候,返回列表页面如果不需要缓存的情况
beforeRouteLeave (to, from, next) {
// 不缓存订单页,刷新
if (to.name == 'Order' && this.isDoSomething) {
to.meta.keepAlive = false;
}
next();
}
=============================================================
changeOrder(){
//进行用户所需要的操作
this.axios.get('接口地址')
.then(res=> {
// 假设这里是接口返回成功的时候
// 表示已经进行不需要缓存的操作
this.isDoSomething= true;
// 返回详情页面
this.$router.go(-1);
})
.catch(err=> {
// 处理错误
})
}
更多推荐
所有评论(0)