vue项目实现返回不刷新、其他菜单进入刷新。keep-alive的用法

项目背景：

• 查询列表进入详情页，返回时列表页不刷新
• 从其他菜单页进入查询列表，列表刷新

实现

• 方案一：详情页通过模态窗口展示。
• 方案二：详情页通过跳转，使用keep-alive处理。

1.渲染组件配置

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
复制代码

2.路由表给列表页设置keepAlive默认为true，即默认为需要缓存的。这里假设h为列表页，a为详情页，b为其他菜单页。

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'h',
            component: h,
            meta: {
                pageTitle: '列表',
                keepAlive: true
            }
        },
        {
            path:'/a',
            name:'a',
            component:a
        },
        {
            path:'/b',
            name:'b',
            component:b
        },
    ]
})
复制代码

3.设置全局导航守卫，当从列表页跳到详情页时，keepAlive为true，否则为false。

router.beforeEach((to, from, next) => {
    if(from.name == 'h'){
        if(to.name == 'a'){
            from.meta.keepAlive = true;
        }else{
            from.meta.keepAlive = false;
        }
    }
    next()
})
复制代码

此时发现可以实现从详情页返回到列表页可以缓存，从其他页进入列表页可以刷新。

但是这里有个问题：

假设列表页h有分页功能，且显示第二页时为h2，显示第三页时为h3

详情页a跳到h，h不刷新

其他页b跳到h，h刷新

首先b跳到h2，h2刷新恢复成h。 修改h为h3，最后再从a跳到h3，发现h3的状态变成了h2，而不是h3

此问题不知道是vue的机制就是这样，还是我哪里没有写对，欢迎各位朋友指点。

改进

发现当keepAlive == true时，会触发activated钩子函数，而当keepAlive == false时，则不会触发

1.渲染组件配置

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
复制代码

2.在路由meta中配置keepAlive，且多配置一个isBack属性，用来判断从哪里进入详情页

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'h',
            component: h,
            meta: {
                pageTitle: '列表',
                keepAlive: true,
                isBack:false
            }
        },
        {
            path:'/a',
            name:'a',
            component:a
        },
        {
            path:'/b',
            name:'b',
            component:b
        },
    ]
})
复制代码

3.在列表页设置导航守卫，判断来源，当从其他页面进入时，isBack为false，从详情页返回时，isBack为true。activated钩子函数判断当从其他页面进入时，进行恢复默认状态的操作，以达到类似刷新的效果。

activated(){
    if(!this.$route.meta.isBack){
        //操作，从其他页面进入时，可以操作恢复默认状态、请求接口。。。
    }else{
        //详情页返回操作，比如页面位置
    }
},

beforeRouteEnter(to,from,next){
    if(from.name == 'a'){
        to.meta.isBack = true;
    }else{
        to.meta.isBack = false;
    }
    next();
}
复制代码

转载于:https://juejin.im/post/5c6e4886f265da2dbf5f04da