一、先设置路由模块元:

        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=> {
        // 处理错误
    })
}

Logo

前往低代码交流专区

更多推荐