vue路由监听不到怎么办？

最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化，查了很多文档最终终于找到解决办法。

方法一：路由包含子路由

{
     
  name: 'home',
  component: Home,
  path: '/home',
  children: [
    {
     
      path: 'main',
      name: 'main',
      component: Main,
    },
    {
     
      path: 'login',
      name: 'login',
      component: Login,
    },
  ]
}

在几个子路由之间跳转就能保证监听到路由变化

方法二：监听$route.path对象

watch: {
     
    "$route.path":{
     
      handler(to, from) {
     
        console.log('to:::', to);
        console.log('from:::', from);
      },
      deep: true
    }
  }

如果我们的路由没有子路由，想要实现监听可以使用$route.path进行深度监听，这样也能监听到路由变化了。

方法三：使用vue自带的路由守卫beforeRouteEnter ，beforeRouteUpdate ，beforeRouteLeave

beforeRouteEnter (to, from, next) {
     
    next(vm => {
     
    	// 通过 `vm` 访问组件实例
 	 })
  },
  beforeRouteUpdate (to, from, next) {
     
  },
  beforeRouteLeave (to, from, next) {
     
  }

据说还能通过设置keep-alive来保证路由被监听到，这个我最近还没用的，有用过的小伙伴可以分享一下。