vue路由守卫（全局守卫）

router.beforeEach((to,from,next)=>{})

回调函数中的参数，

to：进入到哪个路由去，

from：从哪个路由离开，

next：函数，决定是否展示你要看到的路由页面。

• 如下，判断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：从哪个路由离。
• 如下，每次切换路由时，都会弹出alert，点击确定后，展示当前页面。

• router.afterEach((to,from)=>{
    alert("after each");
  })

关于next这个方法的描述应该如何理解

1.next()

你乘坐汽车要从A景区到B景区，路过关卡时，守门人拦下你，你量出了next()，守门人一看没问题，赶紧放行，于是你顺利到达了B景区。

2.next(false)

如果你量出了next(false)，守门人立马关住大门，不让你走，哪都不让你去，你说想换个交通方式，走路或者坐飞机，都不行，老实待在A景区吧

3.next('/')　　

你原本打算从A景区到B景区，但是走到关卡的时候由于某些原因改变了主意，想要去C景区，你对守门员量出了next({path:'/C'})，守门员一看，哦，原来你不去B了，要去C啊，去吧去吧，
然后你顺利到达了C景区

4.next(error)　　

你在出发之前，给你妈妈说，妈，要是有什么事我立马通知你，你记得查看消息啊（你注册了router.onError()）走到中途，
出现了意外，你发出next(error)，然后你妈就收到了消息，赶紧打电话问你怎么了（执行router.onError()里的回调）

　　

　　

 

转载于:https://www.cnblogs.com/listen9436/p/10472483.html