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条件绑定
    
      
    
    
  • 列表页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()
  },
  • 最后这样我就缓存成功啦!

你可能感兴趣的