某些时候，在一些全局的场景中。我们可能会对某个特殊路由进行处理。这个时候，路由的变化就很有用了。来变变变。
- 方式一
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
console.log(to.path);
}
}
- 依旧方式一
watch: {
$route: {
handler: function(val, oldVal){
console.log(val);
},
// 深度观察监听
deep: true
}
},
- 还是方式一
// 监听,当路由发生变化的时候执行
watch: {
'$route':'routeChange'
},
methods: {
routeChange(){
console.log(this.$route.path);
}
}
上边的侦听，是路由从 A 到 B 才有效。如果 A 到 A (比如刷新网页) 这样就没效了。怎么破呢。这样破。
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
}
}
这样，即使是同一个路由。侦听一样 watch 的到。
- 方式二。在使用 router-view 的地方，使用钩子函数。
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
},
data() {
return {
}
}
不仅在 vue 文件中可以使用上边的方式，在纯 js 中也是可以的。
import router from './router'
router.beforeEach(async(to, from, next) => {
next();
})
这种全局的侦听还是很有用的。比如 NProgress 进度条的使用。页面切换动画的使用等。