Vue项目使用keepAlive实现-详情页-返回-列表页-后保存查询条件

1、最近做 vue 前端项目中，有个需求是从订单的列表页面 (list.vue) 进入详情页 (detail.vue) 之后返回订单列表页 (list.vue) 里面查询条件需要被保留之前的数据
2、从其他页面比如首页(home.vue) 进入订单的列表页面 (list.vue) 时候是不需要缓存数据保留之前操作查询。
因此参考 vue 的文档说明，选择用 keep-Alive 来缓存页面, 下面简单描述我的步骤代码：

• 路由配置 router.js

  在路由选项中，配置 meta 属性，需要缓存的页面设置 keepAlive 为 true 即为需要缓存，同时设置 isBack 属性，用来标识页面是否是从详情页面返回的

{
          // 订单管理
          path: '/order',
          component: () => import('@/pages/orders/index.vue'), // 父页面定义 router-view
          children: [
            {
              path: '/',
              name: 'order',
              redirect: 'list'
            },
            // 订单管理 -- 采购单
            {
              path: 'list',
              name: 'list',
              component: () => import('@/pages/orders/purchaser/list.vue'),
              meta: {
                title: '采购单列表',
                keepAlive: true, // 需要被缓存
                isBack: false // 标识是否是详情页
              }
            },
            {
              path: 'detail',
              name: 'detail',
              component: () => import('@/pages/orders/purchaser/detail.vue'),
              meta: {title: '采购单详情'}
            },
          ]
        }

• 父页面 index.vue 配置 keep-alive
  通过判断是否需要缓存的页面，需在 router-view 条件绑定

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

• 列表页 list.vue 页面配置
  通过 beforeRouteEnter(to, from, next)，来判断路由是从哪里跳转进入列表页面，如果是从详情页 detail.vue 跳转的，将当前路由对象的 meta.isBack 设置为 true，否则设置为 false

beforeRouteEnter (to, from, next) {if (from.path === '/order/detail') {
        // 详情页路由
      to.meta.isBack = true
    } else {to.meta.isBack = false}
    next()},

• 为了在其他页面比如首页 (home.vue) 进入订单的列表页面 (list.vue)，刷新页面中的列表数据和查询条件，我们将在 activated 钩子函数中挂在页面初次进入时的请求数据。当进入详情页(detail.vue) 后返回列表页面(list.vue)，保存缓存之前的查询条件

        activated () {if (!this.$route.meta.isBack) {this.initData() // 不是详情页面 (detail.vue) 进入，更新初始化列表数据
            } else {
                // 这是详情页返回，可任意写自己需要处理的方法
                this.$route.meta.isBack = false // 重置详情页标识 isBack
            }
        },

• 到了这一步的时候以为缓存成功啦，然后试了一下 (list.vue) 查询某个字段：比如供应商，查询之后点击订单号跳转进详情页 (detail.vue)，然后再返回订单列表页(list.vue) 的时候依然重新请求数据，keep-alive 设置页面缓存不起作用，这是怎么回事呢？下面是我的解决方法：
• 在 detail.vue 页面 beforeRouteLeave(to, from, next)方法设置 keepAlive

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

• 最后这样我就缓存成功啦！