路由导航全局前置守卫router.beforeEach在vue中的运用

router.beforeEach在一个vue项目中的妙用

路由是前端非常重要的部分，在vue开发中也是必不可少的。vue router官方文档详细的介绍的关于router的一些功能和用法。这里呢我简单的记录下，在真实项目中，基于vue-cli3构建工具下，router 和 router.beforeEach的搭配使用。

beforeEach有哪些参数呢

beforeEach总共有三个参数，分别是to，from，next
to: Route: 即将要进入的目标路由对象

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

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

简写形式

router.beforeEach((to, from, next) => {
	next()
});

当然这么写没有任何意义

to和from里面具体都有什么呢

直接看打印

name: "主页"   //名称，没啥说的 
meta: {}	//路由元信息，多用来写面包屑
path: "/index"	//路径  都明白
hash: ""	//哈希  也没啥说的了吧
query: {}	//和下面的params都是用来接收参数的
params: {}
fullPath: "/index"
matched: (2) [{…}, {…}] //一个数组，包含当前路由的所有嵌套路径片段的路由记录
 //一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组

这就是他们里面的构成，很多东西是我们可以拿来运用的，不过经常要用到的是matched这在前置守卫之中几乎必用

用matched来干嘛

既然匹配到的所有路由都会在matched里面找到，那么显而易见的，我们拿他来做404页面的判断
如：

	if (to.matched.length) {
        //有值正常跳转
        next()
      } else {
      //无值跳转404
        next({
          path: '/404',
        })
      }

在前置守卫中，如果有判断，要把是和否的两种跳转都写明白，不然容易造成栈溢出
话不多说，直接看代码

router.beforeEach((to, from, next) => {
  if (store.getters.token) { //每次跳转页面判断是否登录
    store.dispatch('setToken', store.getters.token) //这里是我自己项目中需要调用的一个方法
    if (to.path === '/login') {	//如果已经登录，输入框又直接输入了login
      Cookies.remove('token') //清除登录状态后跳转登录页
      next({
        path: '/login',
      })
    } else { //如果不是输入登录页
      if (to.matched.length) { //判断是否是已经存在的页面
        !(async function getAddRouters() {  //这是我自己的方法，根据路由添加管理系统导航
          await store.dispatch('getInfo', store.getters.token)
          await store.dispatch('newRoutes', {
            menus: store.getters.info.Menus,
            role: store.getters.info.RoleName,
          })
          await router.addRoutes(store.getters.addRouters)
        })()
        next() //存在就直接跳转
      } else {
        next({
          path: '/404', //不是存在的页面跳转404
        })
      }
    }
  } else {	//如果没有登录
    if (to.path === '/login') {	//已经输入了登录页就直接跳转
      next()
    }
    next({ //没有输入登录页，强制跳转到登录页
      path: '/login',
    })
  }
})

如果你有认真看我的例子和注释，相信你已经知道怎么写前置守卫了，至于在哪写 ，大多数情况下是写在入口文件

如果觉得有帮助请帮我点个赞，祝大家写代码越来越轻松，做一个成功的码农。