vue keep-alive 遇见 vue-router

keep-alive 遇见 vue-router
    ·keep-alive 是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
    ·routre-view也是一个组件，如果直接被包在keep-alive里面，所以的路径匹配到的视图组件都会
        被缓存

keep-alive 与 导航守卫实现嵌套路由的状态缓存：
    code..

先去掉home嵌套路由的重定向：

 

 

 

给router-view套上keep-alive

 

 

 

 

 

 

至此，一级路由的状态缓存完毕。

但是当我们访问二级路由 比如：/home/mes，然后切换出去了

再切换一级/home时，还是/home并不会访问/home/mes，我们需要在Home组件里定义相关的声明周期函数，实现嵌套路由的缓存

 

<script>

export default {
  name: 'Home',
  data(){
    return {
       // 记录当组件活跃时，跳转的路由
       path: '/home/news'
    }
  },
  props: {
    
  },
  beforeDestroy(){
    console.log('home dis')
  },
  // 活跃状态（组件被保持了状态使用了keep-alive时，切换出去切换回来调用的是 activated，deactivated，而非created，destroyed
　　// 如果组件没有使用keep-alive，就没有activated，deactivated生命周期函数

　　// 小程序默认使用的了keep-alive

  activated() {
    console.log(this.path)
    this.$router.push(this.path)
  },
  // 导航守卫（当路由离开之前
  beforeRouteLeave (to, from, next) {
    console.log(this.$route.path)
    this.path = this.$route.path;
    next()
  }
}
</script>