Vue路由守卫总结

---

前言

路由守卫是什么?

• vue-router 提供的导航守卫主要用来通过跳转或者取消的方式守卫路由
• 也就是路由拦截
• 可以通过路由守卫,来判断用户是否登录,该页面用户是否有访问该页面权限
• 路由守卫分为全局路由守卫,组件路由守卫,独享路由守卫

一、全局路由守卫

所谓全局路由守卫，相当于路由实例对象的保安，当你进行进行路由跳转时 ,都需要经过保安的检查
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫

全局前置守卫 beforeEach

beforeEach参数解析

• beforEach有三个参数(to,from,next)
• 参数中包括(完整的路由,路由名称,,meta,query,params,path)
• to :即将要去往的路由
• from :当前导航要离开的路由
• next():判断路由是否通过
• next()用法一: next()直接通过
• next()用法二:next("/login"):强行跳转到指定页面
• next()用法三: next(false):不允许跳转

代码实现

//路由页面
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [...]

const router = new VueRouter({
  routes
})
router.beforeEach((to, from, next) => {
  if (to.path == "/main") {
      const token = localStorage.getItem("token")
    if (token) {
        next()
    }else{
      next("/login")
    }
  }else{
      next()
  }
})
export default router

全局后置守卫 afterEach

afterEach 解析

• afterEach会在路由跳转后执行
• afterEach()只有两个参数(to,from)
• afterEach没有next()
• afterEach对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。

二、组件路由守卫

• 组件路由守卫跟data,methods等同级
• 组件路由守卫是写在每个单独的Vue文件里面的路由守卫
• 组件路由守卫都只有to和from两个参数
• 参数内容和全局路由守卫一样

beforeRouteEnter

• 在渲染该组件的对应路由前被调用
• 不能获取组件实例的 this
• 因为当该守卫执行时,组件实例还没有被创建

beforeRouteUpdate

• 当前的路由改变,但是组件被复用时调用
• 路由更新之前(组件没有变化但是路由变了--动态路由)调用
• 例如:一个有动态参数的路径,在两个页面之间跳转的时候;由于渲染了同样的组件,因此组件实例被复用,而beforeRouteUpdate会在这个时候调用
• 这个时候组件已经挂载好了,导航守卫可以访问组件实例的this

beforeRouteLeave

• 当导航离开渲染组件的对应路由时调用
• 在beforeRouteLeave可以访问组件实例的this

三、独享路由守卫

beforeEnter

路由配置上定义路由守卫

• 在进入路由的时候触发
• 不会在params,query,hash改变时触发
• 只有从不同的路由导航进入才会触发
• beforeEnter可以接收一个函数数组
• das
  beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发。

代码展示

//定义路由
const routes = [
  {
    path: '/home/:id',
    component: HomeDetails,
    beforeEnter: (to, from,next) => {
        //与全局路由守卫用法一致，但是只能针对一个页面使用
    },
  },
]

接收函数数组

function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}

function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
  {
    path: '/home/:id',
    component: HomeDetails,
    beforeEnter: [removeQueryParams, removeHash],
  },
  {
    path: '/about',
    component: HomeDetails,
    beforeEnter: [removeQueryParams],
  },
]

总结

以上是路由守卫的用法,在处理页面跳转取消权限控制时,用处很多

点个赞在走吧