vue 实现详情页返回列表页保持原来页码

vue 中 有 keep-alive 是 vue内置组件 可以保留原状态 避免重新渲染数据了
1.在App.vue里面

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

2.在需要缓存的路由上加上meta标志

 {
   path: '/busi-manage/sw/archive-file',
   name: '纸质归档',
   meta: {
     keepAlive: true // 开启缓存
   },
   component: (resolve) =>
     require([
       '@/views/busiManage/archiveFile/ArchiveFile.vue'
     ], resolve)
 },

3.在详情页设置返回

// 返回按钮 触发
    <el-button size="small" style="float: right;" @click="returnBack">返回</el-button>

    // method:
     returnBack(){
         this.$router.back(-1);
     },