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()  //调用自定义接口函数
},