vue-router 与keep-alive的使用

1 需求：

在页面上有一个列表，我们希望当点到别的路由再点回来时，列表还是上一次点开这个选择的那个列表

2 实现

2.1 删除默认的路由重定向

  {
    path:'/home',
    component:Home,
    meta:{
      title:'首页'
    },
    children:[
     /* {
        path: '/home',
        redirect:'message'
      },*/
      {
        path:'news',
        component:HomeNews
      },
      {
        path:'message',
        component:HomeMessage
      }
    ]
  },

2.2  使用keep-view

keep-view是vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染。也就是 它不会被销毁

 <keep-alive>
      <router-view></router-view>
    </keep-alive>

2.3  使用activated和组件内守卫 获取当前选择的列表

export default {
    name: "Home",
    data(){
      return{
        message:'你好啊',
        path:"/home/news"
      }
    },
    //为了能显示消息还是新闻，返回时依然能选中
    //在离开之前 通过activated （活跃的时候，push一个地址）
    activated() {
      this.$router.push(this.path)
    },
    //导航离开该组件的对应路由时使用
    //可以访问组件的实例this
    //为了记录上一次离开的时候的状态
    beforeRouteLeave(to,from,next){
      console.log(this.$route.path)
      this.path = this.$route.path
      next()
    }
  }