一、什么是路由守卫
导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。
简单的说,导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,这就是导航守卫。
二、全局守卫
router.beforeEach((to,from,next)=>{})
回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。
main.js中设置全局守卫
在main.js中,有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。
如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。
这样就可实现,用户在未登录状态下,展示的一直是登录界面。
router.beforeEach((to,from,next)=>{
if(to.path == ‘/login’ || to.path == ‘/register’){
next();
}else{
alert(‘您还没有登录,请先登录’);
next(’/login’);
}
})
全局后置钩子router.afterEach((to,from)=>{})
只有两个参数,to:进入到哪个路由去,from:从哪个路由离开。
三、组件内的守卫
到达这个组件时,beforeRouteEnter:(to,from,next)=>{}
在Admin.vue文件中,点击转到admin路由时,执行beforeRouteEnter函数
to,from参数与上面使用方法一致。next回调函数略有不同。
如下例,data 组件内守卫有特殊情况,如果我们直接以
beforeRouteEnter:(to,from,next)=>{ alert(“hello” + this.name);}进行访问admin页面,会发现alert输出hello undefined。这是因为,现在访问不到我们的data属性,执行顺序是不一致,这与的声明周期有关。在执行完之前,data数据还未渲染。所以这里,next()会给一个对应的回调,帮助完成。
export default {
data(){
return{
name:“Arya”
}
},
beforeRouteEnter:(to,from,next)=>{
如下例,data 组件内守卫有特殊情况,如果我们直接以
beforeRouteEnter:(to,from,next)=>{ alert(“hello” + this.name);}进行访问admin页面,会发现alert输出hello undefined。这是因为,现在访问不到我们的data属性,执行顺序是不一致,这与的声明周期有关。在执行完之前,data数据还未渲染。所以这里,next()会给一个对应的回调,帮助完成。
export default {
data(){
return{
name:“Arya”
}
},
beforeRouteEnter:(to,from,next)=>{
点击其他组件时,判断是否确认离开。确认执行next();取消执行next(false),留在当前页面。
四、路由独享的守卫
beforeEnter:(to,from,next)=>{},用法与全局守卫一致。只是,将其写进其中一个路由对象中,只在这个路由下起作用。