Vue 路由导航守卫
一：全局守卫
(1) router.beforeEach
beforeEach((to, from, next) => {}) 接收三个参数，在路由切换成功之前调用
to 将要进入的目标路由，要去哪里
from 将要离开的路由，从哪里来
next 跳转路由，next(false) 中断导航
// router -> index.js
router.beforeEach( (to, from, next) => {
// 判断你要访问的路由页面路径是否是'login'，若是，则放行
if(to.path == '/login') return next();
// 若不是，则跳转到'login'
next('/login')
})
(2) router.afterEach
afterEach((to, from) => {}) 接收两个参数，在路由切换成功之后调用
to 将要进入的目标路由，要去哪里
from 将要离开的路由，从哪里来
// router -> index.js
router.afterEach( (to, from) => {
// 操作
})
二：组件内守卫
(1) beforeRouteEnter
beforeRouteEnter((to, from, next) => {}) 接收三个参数，到达这个组件之前调用
to 将要进入的目标路由，要去哪里
from 将要离开的路由，从哪里来
next 访问组件实例、放行
export default {
data(){
return{
name:"Arya"
}
},
beforeRouteEnter(to,from,next){
next(vm=>{ // vm相当于组件中的this
alert("hello" + vm.name);
})
}
}
(2) beforeRouteLeave
beforeRouteEnter((to, from, next) => {}) 接收三个参数，离开这个组件时调用
离开这个组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。
beforeRouteLeave(to,from,next){
if(confirm("确定离开此页面吗？") == true){
next();
}else{
next(false);
}
}
三：路由独享守卫
beforeEnter
用法与全局守卫一致。只是将其写进其中一个路由对象中，只在这个路由下起作用
