在项目中使用vue的时候发现使用watch监听不到$route的变化

在项目中遇到使用watch监听$route变化的时候失效，现在整理一下

watch: {
	$route(to, from) {
		console.log(to, from)
	}
}
// 监听失效

一.watch监听

1. 一级路由：将匹配到的路由组件直接渲染在router-view区域中，路由组件渲染默认的方式是销毁 - 创建，因此$watch是监听不到一级路由的变化的。

watch: {
	$route: {
		handler(to, from) {
			console.log(to, from)
		},
		immediate: true
	}
}
// 路由变化时候直接监听，但是监听不到from的值，只能监听to

2. 监听子路由：有子路由的情况下，能在当前组件监听到子组件的路由变化

watch: {
	$route(to, from) {
		console.log(to, from)
	}
}

二，使用vue自带的路由守卫beforeRouteEnter ，beforeRouteUpdate ，beforeRouteLeave

beforeRouteEnter (to, from, next) {
    next(vm => {
    	// 不能获取组件实例‘this’，因为此时组件实例还没有被创建
    	// 通过 `vm` 访问组件实例
 	 })
  },
  beforeRouteUpdate (to, from, next) {
  // 可以获取this
  },
  beforeRouteLeave (to, from, next) {
  // 可以获取this
  }