路由守卫

今天在做项目的时候遇到一个功能：登录后才能进入其他界面的一个权限，叫做路由守卫。

那这个路由守卫具体怎么实现呢？我查阅了官网：

官网关于路由守卫的解释是：全局的, 单个路由独享的, 或者组件级的

记住参数或查询的改变并不会触发进入/离开的导航守卫。

我复制了官网的一个关于未验证身份重定向的例子，给大家作参考：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

看过长篇大论不知道你是不是头都大了！！

其实你只要理解to、from、next、next()的含义就可以看懂上述代码了~~

说到最后，上述例子中直接复制就可以了，但是千万千万不要忘了在路由里添加一个name属性要不要是不会生效的哦~~

附图：

 

 请大家还是多看看官网，一定会有你想不到的收获~

最后的最后附上官网地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html