vue-router组件内的导航守卫

【示例】：
用户进入user组件之前取路由值执行alert
用户改变query参数，触发alert（等价于watch $route）

<script>
export default {
name: "User",
mounted:function(){
console.log('mounted')
},
// watch: {
//   // 如果路由有变化，会再次执行该方法
//   '$route': 'fetchData'
// },
methods:{
fetchData:function () {
alert('change!')
},
userAlert:function (name) {
alert(`查看${name}的用户界面`)
}
},
beforeRouteEnter(to,from,next) {
console.log('User.vue:before route enter invoked');
next(vm=>{
vm.userAlert(to.params.name);//导航之前获取路由数据并执行方法
});
},
beforeRouteUpdate(to,from,next) {//此处有this，等效于watch，每次路由参数更新触发
console.log('User.vue:before route update invoked');
// alert('changed')
this.fetchData();
next();
},
beforeRouteLeave(to,from,next) {
console.log('User.vue:before route leave invoked');
next();
},
}
</script>

beforeRouteEnter用来在导航之前获取路由里的params/query，并作出处理，如据此向获取数据等。这里只是给它alter出来。注意：此刻还没有this，要使用回调函数
beforeRouteUpdate用于监控组件内路由变化时，比如params或query的改变，并据其做出一些响应，等价于watch（代码里的备注内容）。已经有this了，因为之前挂载过了，现在只是更新，直接执行this.XXX();
beforeRouteLeave离开该组件时，如果是一个很大表单，用于当填写信息，不小心按了其他键要离开该组件时，给用户一个提醒判断，要不要离开。不离开不执行next()，给应用提供一些安全性。比如：

beforeRouteLeave(to,from,next) {
console.log('User.vue:before route leave invoked');
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)//important!不可以什么都不写，什么都不写会发生地址栏路由改变界面不变
}
},

效果如下：

想到其他用处会再补充