vue缓存及路由和生命周期触发的完整流程

A -> B 无缓存
B -> A （A保留了之前的缓存）
C -> A （A无缓存）

方法1（会有bug）：使用beforeRouteEnter钩子配合keep-alive（这里需要注意如果一个组件有的时候需要缓存有的时候不需要，那么你在路由配置的时候也应该设置keepAlive为true，然后不需要缓存的路由设置为false就行，如果一开始设置为false第一次缓存的时候页面依然会重新渲染），而且因为在beforeRouteEnter里拿不到组件实例，得通过next获取，而next的时候页面已经渲染完了，所以这里你通过修改meta里的keepAlive也是无效的。需要判断来自的路由然后如果路由不是B就执行以下初始化获取数据的函数
App.vue

<keep-alive>
      <router-view  v-if='$route.meta.keepAlive' class="child-view"></router-view>
    </keep-alive>
    <router-view v-if='!$route.meta.keepAlive' class="child-view"></router-view>

A

{
  path: '/A',
  name: 'A',
  meta: {
    keepAlive: true
  }
}
beforeRouteEnter(to, from ,next) {
  next(
    (vm) => {
        // 如果不是从B来的就重新获取数据
        if (form.name !== 'B') {
          vm.init()
        }
    }
  )
},
methods: {
    init(){
      this.getData()
    }
},
created(){
  this.init()
}

B

{
  path: '/B',
  name: 'B',
  meta: {
    keepAlive: false
  }
}

方法2：使用beforeRouteLeave，如果进入的不是B就清除缓存keepAlive设为false
A

beforeRouteLeave (to, from, next) {
    if (to.name !== 'B') {
      this.$route.meta.keepAlive = false
    }
    next()
  },

路由及生命周期触发的完整流程

将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

1. beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
2. beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
3. beforeEnter: 路由独享守卫
4. beforeRouteEnter: 路由组件的组件进入路由前钩子。
5. beforeResolve:路由全局解析守卫
6. afterEach:路由全局后置钩子
7. beforeCreate:组件生命周期，不能访问this。
8. created:组件生命周期，可以访问this，不能访问dom。
9. beforeMount:组件生命周期
10. deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
11. mounted:访问/操作dom。
12. activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
13. 执行beforeRouteEnter回调函数next。

作者：sweetBoy_9126
链接：https://www.jianshu.com/p/bfa94da23961
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。