vue中路由守卫钩子函数的使用
什么是路由守卫钩子函数？
在日常的vue项目开发过程中，大多的项目会涉及到权限问题：
登陆与未登录状态的管理
登陆后不同角色所看到的内容的区别
顾名思义，守卫就是时时刻刻的守护着你，路由守卫就是用于实时监听路由的变化，根据变化做出各种处理方式；vue-router里提供了一个beforeEach的方法，它就是我们常用到的路由钩子函数（还有个afterEach钩子函数，不常用）
如何进行路由守卫与检测？
其中这个方法提供了三个参数beforeEach(to, from, next)，关于这三个参数的使用：
to：是个对象，你将要跳转的目标路由；这一步你就可以通过你当前的状态（是否登陆或角色的权限）来决定你是否跳转到当前页面。
from: 是个对象， 你从哪里跳转过来；这一步你可以通过从不同渠道到当前页面来进行相应的处理。
next: 是个方法，如果你使用了路由守卫，那你要想进行路由跳转时就必选使用next()，路由才会进行相应的跳转；next()函数也可以传入一个参数，例如：next({
path: '/index' })，它的含义是路由跳转的目标将是index页面；还可以通过传入false来中断此次路由的跳转。
以上就是路由守卫的主要使用方法，下面举个vue-router路由守卫的实例：
import Router from 'vue-router' //首先需要导入包
// 接下来就可以在下面函数内部进行路由的各种管理控制
Router.beforeEach((to, from, next) => {
if (!localStorage.getItem('token')) {
// 例如你把token存入本地，你就可以通过它来判断是否需要跳转到登录页
if (to.path === '/login' || to.path === '/register') {
// 对于登陆注册页完全开发
next()
} else {
next({
path: '/login' })
}
} else {
const level = user.xxx // 我们假设level是用户登陆后获取的身份等级，level = 1是普通用户，level = 2是vip用户
if (level === 1) {
if (to.path !== '/index') {
例如：我们只让普通会员只能看index页面
next({
path: '/index' })
}
} else if (level === 2) {
// 对于vip用户，可以看到所有的页面
next()
}
}
})
export default Router // 最后把我们封装好的路由守卫暴露出去，在main.js中引入即可
在实际项目开发中，对于涉及到权限问题的，选择路由守卫钩子函数能够更好的解决页面跳转问题；以上就是我对vue中路由守卫钩子函数的理解，希望能够对你有所帮助！
原文链接：https://blog.csdn.net/Mrcaolei/article/details/108401174