vue中路由守卫钩子函数的使用

vue中路由守卫钩子函数的使用

什么是路由守卫钩子函数？

在日常的vue项目开发过程中，大多的项目会涉及到权限问题：

1. 登陆与未登录状态的管理
2. 登陆后不同角色所看到的内容的区别

顾名思义，守卫就是时时刻刻的守护着你，路由守卫就是用于实时监听路由的变化，根据变化做出各种处理方式；vue-router里提供了一个beforeEach的方法，它就是我们常用到的路由钩子函数（还有个afterEach钩子函数，不常用）

如何进行路由守卫与检测？

其中这个方法提供了三个参数beforeEach(to, from, next)，关于这三个参数的使用：

• to：是个对象，你将要跳转的目标路由；这一步你就可以通过你当前的状态（是否登陆或角色的权限）来决定你是否跳转到当前页面。
• from: 是个对象， 你从哪里跳转过来；这一步你可以通过从不同渠道到当前页面来进行相应的处理。
• next: 是个方法，如果你使用了路由守卫，那你要想进行路由跳转时就必选使用next()，路由才会进行相应的跳转；next()函数也可以传入一个参数，例如：next({ path: '/index' })，它的含义是路由跳转的目标将是index