Vue中监听路由变化，来决定是否跳转页面

这段时间在用Vue做一个项目时，遇到了一个需求。用户如果没有登录，在点击导航栏按钮时，就不能进入某些页面。

以前在用原生Js写时，这个需求都是交给后端去处理的，但因为Vue来是单页面框架，所以就不需要交给后端去处理了。

最开始我是在按钮上设置了如果用户是没有登录的状态，就不执行跳转行为，但我在浏览器的URL地址栏中输入要跳转的页面地址时，就能跳转过去，没有被阻拦，最后我用了Vue中的 $router来解决。

watch: {
$route (to, from) { //to:即将要跳转到的页面   from:即将离开的页面
if (to.path === '/write' && this.$store.state.usertf === '1') {
alert('想进去？没门，快滚去登录！')
this.$router.push('/home')
this.$emit('denglu')
} else if (to.path === '/home') {
this.$router.push('/home')
}
}
},

在组件中用 watch来监听 $router的变化，这样不管是点击导航栏按钮还是在URL地址栏中输入地址，它都能检测到，然后再来根据要跳转哪个页面再来做出处理是否要放行的处理，这样就能实现这个需求了。

注意：只能监听子路由的路由变化，同级或者父级路由的变化是监听不到的，如果要全局监听路由变化，可以在App.vue文件中监听。