vue使用keep-alive缓存列表页

需求说明: vue后台管理类项目, 列表页A,详情页B, 详情页B返回列表页A时要保留A页面的页码及筛选条件

一、简单的页面缓存 如：只保留page、page-size可以考虑params传参处理  简单好用

二、筛选功能多，排序、搜索、页码都需要保留时  使用keep-alive

        1.列表的router.js 给meta添加属性keepAlive=true,isBack=false,keepAlive是否缓存 isBack后面判断是否由详情页跳转过来的

{
        name: 'myList',
        path: '/my-list',
        component: myList,
        meta: {
            pageName: '列表',
            // 缓存list列表
            keepAlive: true,
            isBack: false,
        },
    },

        2.App.vue 页面添加 $route.meta.keepAlive判断页面是否需要缓存（详情页B离开时的钩子函数中修改）  由于list的上一级页面时App.vue, 所以在App.vue中添加  如上一级是index.vue 就在index.vue添加   

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

        3. 详情页面B  钩子函数beforeRouteLeave

beforeRouteLeave (to, from, next) {
        to.meta.keepAlive = true // 给列表(list.vue)页面设置keepAlive
        next()
    },

        4.列表页A

beforeRouteEnter (to, from, next) {
     // 详情页路由 设置isBack为 true 还是 false
      to.meta.isBack = from.path === '/detail'
      next()
 },
// keep-alive activated钩子
    activated () {
        if (!this.$route.meta.isBack) {
            this.init() // 不是患者详情页面(detail.vue)进入，更新初始化列表数据
        } else {
            // 这是详情页返回
            this.$route.meta.isBack = false // 重置详情页标识isBack
        }
    },
// init函数初始化页面data 
    methods里添加
       init(){
            // 初始化data的值
            Object.assign(this.$data, this.$options.data())
            // 获取列表数据
            this.getList()
        },

参考文章 ： 【Vue】Vue项目使用keep-alive实现 详情页 返回 列表页 保存之前的查询条件，但其他页面进入列表页不保存查询条件_chase…的博客-CSDN博客