问题描述

在做项目时，在管理后台中有一个申请单管理模块（带分页的），可以查看用户的申请状态，点击操作中详情可以进入详情页面，详情可以返回申请单列表，详情页面是通过路由配置的，这个时候进入详情页面申请单列表页面会被销毁，当我们通过router.go(-1),或者router.push() 再次进入申请单列表页面时，会重新执行 beforeCreate -> created -> beforeMount -> mounted ... 申请单列表的状态都重新初始化，无法记录进入之前已经选择的分页或者条件 。。。
总结如下：

1. 从详情页返回申请单记录进入详情之前的状态
2. 从其他路由进入不能记录离开之前的状态，必须初始化为第一次进入的状态

解决办法

网上一查一大堆解决方案，但是自己尝试一下了都不是很满足，大概有以下几种

1. 通过keep-alive 设置include，自己项目里反正不起作用，我确信自己的组件内部设置了 name 属性 ，vue 版本2.5.2 （待解决）

<!-- App.vue-->
<template>
  //   :include="['ApplyManage']"  include="ApplyManage" 这两种写法都没有起作用
  <keep-alive :include="['ApplyManage']"> 
    <router-view></router-view>
  <keep-alive>
</template>

2. 通过设置路由meta字段keepAlive,通过这种方式设置确实可以实现详情返回申请单列表记录了上次状态，但是又有一个新的问题，从其他页面进入申请单列表记录的还是上次退出申请单列表的状态，这个就很不友好。。。

// router.js，这里只是示例
const router = [
  {
    path:'/apply-list',
    name:'ApplyManage',
    component:() => import('@/views/ApplyManage'),
    meta:{ title:'申请单列表', keepAlive:true }
  },
  {
    path:'/apply-detail',
    name:'ApplyDetail',
    component:() => import('@/views/ApplyDetail'),
    meta:{ title:'申请单详情', keepAlive:true }
  }
]

<!-- App.vue-->
<template>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</template>

上面代码已经完成了我们大部分的功能，我们在这个基础上修改一下，也就是退出申请单列表需要将申请单状态重置，但是进入详情不重置。这个时候组件内导航钩子就配上用场了 beforeRouteEnter, beforeRouteLeave

// Home.vue
<script>
  export default {
    data(){
      return{
        isFirstEnter:false  // 标识是否第一次进入
      }
    },
    created(){
      this.isFirstEnter = true
    },
    activated(){
      // 缓存后只有这个钩子和deactivated 运行，我们在这里判断，只有第一次进入或者是通过其他页面返回不是详情返回就重新调用数据
      if(this.$route.meta.isBack || this.isFirstEnter) {
        this.page.currentPage = 1
        this.searchData()
      }
      this.$route.meta.isBack = false // 要进入就要设置false
      this.isFirstEnter = false  // 必须要设置false,否则每次就重新刷新数据
    },
    methods:{
      // 获取申请单数据
      searchData(){}, 
      // 我这里添加这个钩子是因为路由表是接口返回的，接口返回数据没有配置这个属性，所以在代码里加入
      beforeRouteEnter(to,from,next){
        to.meta.keepAlive = true
        next() // 一定要调用
      },
      beforeRouteLeave(to,from,next){
      if(to.name == 'ApplyDetail') {
        from.meta.isBack = true
        next()
      }else{
         // 如果是去其他页面将申请单列表的isBack 设置为false,这样第二次进入就会进入activated中判断重新获取数据，
        form.meta.isBack = false
        next()  
      }
    }
   }
 }
</script>

经过上面的设置，我们大致完成了我们的需求，从 a进入申请单列表页面不缓存 ，申请单列表进入详情缓存，如果在申请单有一些过滤条件的选择，我们这样设置了之后，状态还是保留了，我们可以在退出之后将状态初始化就可以了