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

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()
  },

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