vue项目列表页搜索条件、列表排序、分页进入详情页缓存问题

使用场景:当在列表页内,点击按钮跳转到详情页,从详情页返回,应保留原有搜索条件、分页、及排序规则。

router文件夹下index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/patis',
    name: 'Group',
    component: () => import('views/sickManage/Group.vue'),
    meta: {
      title: '医生列表',
      keepalive: true    //列表页设置keeplive为true
    }
  },
  {
    path: '/patientDl',
    name: 'Detail',
    component: () => import('views/sickManage/Detail.vue'),
    meta: {
      title: '医生详情',
      keepalive: false   //详情页设置keeplive为false
    }
  },
  {
    path: '/clinicalDat',
    name: 'clinicData',
    component: () => import('views/statiReport/clinicData.vue')
  }
],

  router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
router.beforeEach(async (to, from, next) => {
  const toPath = to.path,
    newPageList = window.myLeftMenuList.pageList || []
  if (toPath === '/') {
    next(`${newPageList[0]}`)
    return
  }
  if (toPath === '/pageNoPermision') {
    next()
    return
  }
  if (toPath === '/pdfView') {
    next()
    return
  }
  if (newPageList.indexOf(toPath) < 0) {
    next({ name: 'pageNoPermision' })
  } else {
    next()
  }
})
export default router

2、然后再router-view那里设置

<template>
  <div id="app">
    <v-app>
      <el-container>
        <div class="headTop"><TopCont /></div>
        <el-container style="margin-top: 60px; max-height: 900px">
          <LeftNav />
          <el-main>
            <keep-alive :max="1">
              <router-view v-if="$route.meta.keepalive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepalive"></router-view>
             //缓存关键代码
          </el-main>
        </el-container>
      </el-container>
    </v-app>
  </div>
</template>

最后,详情页修改数据后返回列表页发现列表页在created钩子函数中调用接口不会触发,列表页数据不能进行动态更新,解决:

创建activated钩子函数调用接口

activated() {
    this.updateFunc()  //调用自定义接口函数
},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值