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

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