持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

路由守卫

导航守卫就是路由跳转过程中的函数，来完成页面路由跳转这一过程。

这个过程分为跳转前、跳转中、跳转后等，在每一个过程中都有对应的函数，这些函数能让你在这个时刻做一下操作。比如跳转前是否验证登录等。

全局前置守卫 beforeEach()

beforeEach()是路由实例上直接操作的钩子函数，触发路由就会触发。

beforeEach() 一般用来做一些进入页面的限制；

beforeEach() 有三个参数，to, from, next;

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

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

next(): 进行管道中的下一个钩子；

路由独享守卫 beforeEnter()

beforeEnter()是在单个路由配置的时候也可以设置的钩子函数;

在路由配置上直接定义 beforeEnter ()，beforeEnter和 beforeEach 完全相同，参数也是参数to、from、next；

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

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

next(): 进行管道中的下一个钩子；

小案例

验证用户登录状态，未登陆时只允许用户访问登录页和注册页，登录成功直接跳转到首页；

示例代码：

	const routes = [
	  {
	    //注册页
	    path: '/register',
	    name: 'Register',
	    component: () => import(/* webpackChunkName: "Register" */ '..//views/Register/Register'),
	    beforeEnter(to, from, next){
	      const { isLogin } = localStorage;
	      //登录跳转至首页
	      isLogin ? next({ name : 'Home'}): next();
	    }
	  },
	  {
	    //登陆页
	    path: '/login',
	    name: 'Login',
	    component: () => import(/* webpackChunkName: "Login" */ '../views/Login/Login'),
	    beforeEnter(to, from, next){
	      const { isLogin } = localStorage;
	      //登录跳转至首页
	      isLogin ? next({ name : 'Home'}): next();
	    }
	  },
	]
	router.beforeEach((to, from, next) => {
	  const { isLogin } = localStorage;
	  // 用户未登陆只允许访问登录页和注册页
	  if(!isLogin && (to.name !== "Login" && to.name !== "Register"))
	  {
	    //未登录自动跳转至登录页
	    next({ name : 'Login'});
	  }else{
	    next();
	  }
	})

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！