VueRouter路由守卫

---

前言

提示：这里可以添加本文要记录的大概内容：

仅作个人学习笔记。
笔记完整代码：https://gitee.com/hebe0330/vue_route_guards.git
更多详情可浏览👉导航守卫 | Vue Router

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、路由守卫是什么？

当我们路由切换到一个组件里面，如果没有权限不让进入，有权限可以进入。
注意：所有路由守卫都是通过路由规则才执行的。 通过引入组件直接使用的路由守卫不管理

二、全局路由守卫 – 前置 与 后置

全局路由守卫是放置在router文件下的

1.全局前置路由守卫

使用 router.beforeEach 注册一个全局前置路由守卫

全局前置路由守卫代码如下（示例）：

const router = new VueRouter({.....})
// 全局前置路由守卫 -- 初始化的时候被调用，每次路由切换之前被调用
router.beforeEach((to, from, next) => {
// 可以通过path,name以及在meta中添加特殊属性作为是否需要权限 以下三选一
  if (to.path === '/home/news' || to.path === '/home/message') {
  // if (to.name === 'News' || to.name === 'Message') {
  // meta需要提前在对应的路由信息内配置 meta: {isCheck: true}
  // if (to.meta.isCheck) {
    if (localStorage.getItem('pass') === '1234') {
      next()
    } else {
      alert('wuquanxian')
    }
  } else {
  // 注意 这里是指不是news 和 message 的就无需校验
    next()
  } 
})

在前置守卫中给指定的几个路由组件设置权限，满足权限才可以进入 next()。

2.全局后置路由守卫

使用 router.afterEach 注册一个全局后置路由守卫

全局后置路由守卫代码如下（示例）：

// 全局后置路由守卫 -- 初始化的时候被调用，每次路由切换之后被调用
router.afterEach((to, from) => {
// 进入路由组件后修改title 
// 需要提前给每个路由组件配置meta属性 meta: {..., title: '标题'}
  document.title = to.meta.title || '路由守卫'
})

三、独享路由守卫

顾名思义在某一个路由组件单独设置的路由守卫，使用方式直接在路由配置上定义 beforeEnter 守卫

代码如下（示例）：

{
   name: 'News', path: 'news', component: News, meta: { isCheck: true, title: '新闻' },
   beforeEnter: (to, from, next) => {
   // 这里同样可以通过path,name判断
    if (to.name === 'News') {
      if (localStorage.getItem('pass') === '1234') {
         next()
       } else {
   		 alert('wu quan xian')
     }
    }
  }
},

独享路由守卫只有前置没有后置！

四、组件内路由守卫

不同于前两种，组件内路由守卫是在组件内配置的。

1.进入该组件时被调用

  beforeRouteEnter (to, from, next) {
    // ...
  }

2.离开该组件时被调用

  beforeRouteLeave (to, from, next) {
    // ...
  }