前两篇博客已经介绍了路由的大部分知识点：

vue路由全面详解（上）：基本使用、多级路由、工作模式……_czjl6886的博客-CSDN博客

vue路由全面详解（中）：路由命名、query参数、params参数、props配置、replace属性、编程式路由导航_czjl6886的博客-CSDN博客

今天我们来把路由最后一部分内容来详细讲解一番，（内心OS：终于要结束路由了！）

 

目录

 一、路由守卫

1.作用

2.分类

3.案例展示

二、 缓存路由组件

1.作用

2.前提知识

3.编码方法

---

 

 一、路由守卫

1.作用

对路由进行权限控制。当满足条件时，才进行路由切换，如，某些页面需要用户登录之后才能看到，又称为导航守卫，官方文档：导航守卫 | Vue Router

2.分类

全局守卫、独享守卫、组件内守卫

3.案例展示

当用户点击 Home主页时，路由跳转到 Home 页面；当用户点击 User中心 时，如果用户已经登录了，localStorage 存储了该用户的信息，则进行跳转，否则不跳转 

a.全局路由守卫

全局路由守卫分为全局前置守卫和全局后置守卫。全局路由守卫经常被使用

 beforeEach( ) 全局前置守卫：初始化时执行、每次路由切换前执行；

 如下：不进行任何路由切换时，每次初始化时，都会执行全局前置守卫

import VueRouter from "vue-router"

//创建并暴露一个路由器
const router =  new VueRouter({
  routes:[
    {
      path:'/about',
			component:() => import ('../pages/About.vue')
    },
    {
      path:'/home',
			component:()=> import('../pages/Home.vue'),    
    },
    {
      path:'/user',
			component:()=> import('../pages/User.vue')
    }
  ]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach(()=>{
  console.log('*****')
})

export default router

 beforeEach( )可以传递三个参数：to 、from、next

 to：要跳转到的目标路由

from：从当前哪个路由进行跳转

next：不做任何阻拦，直接通行，该往哪个路由跳转就往哪个跳转

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
  console.log("全局前置路由守卫")
  console.log(to,from)
  if(to.name === "用户"){
    if(localStorage.getItem('username') === "唯一的阿金"){
      next()
    }else{
      alert('用户名不正确，没有权限查看！')
    }
  }else{
    next()
  }
})

点击 Home主页 ，路由守卫不会阻拦，打开控制台查看 to 和 from 的内容

 从  Home主页，点击跳转到 User中心页面，由于 localStorage 中存储了用户名，所以路由守卫不会阻拦，可以成功跳转

 如果把用户名改成”唯二的阿金“，则不能成功切换到 User 页面，这就是前置路由守卫主要的功能

 

上面，我们是通过判断路由名字，来判断是否进行下一步的判断，但是如果需要判断的路由很多，那我们就需要写成下面的形式，很麻烦是不是？

if(if(to.name === "用户") || if(to.name === "关于") || …… )

 解决办法是：

$route 中有一个配置项是 meta ，专门提供给我们，在 meta 项中配置自己的属性与值

 具体代码如下：

这样写是不是简便了很多！ 

afterEach( ) 全局后置守卫：初始化时执行、每次路由切换后执行

两个参数：to ，from，没有next参数，其他和全局前置守卫一样

 每次路由切换后，才执行全局后置守卫，那它有什么作用呢？既然我都已经切换到了目标路由，为什么还需要这个呢？

场景：我们可能需要实现一个功能，当点击 User 时，不满足权限要求，则网址栏是不会跳转到 User 页面的，但是 document.title 会发生变化：显示的是 User 页面的 title

 解决办法：使用全局后置路由守卫可以解决这个问题：

 

 完美解决！ 

 b.独享路由守卫

 1.含义：某一个路由独有的路由守卫，api 名字是 beforeEnter

直接在需要设置权限的路由配置中写代码，代码逻辑和全局前置路由一模一样，可以直接 copy 过来，

 需要注意 ：

独享路由守卫只有 beforeEnter ，没有 afterXXX !

beforeEnter 和 全局后置守卫 可以同时使用，不冲突！

c.组件内路由守卫

组件内路由守卫，就是在组件内部编写代码，实现权限管理 ，如果组件里面有自己单独的权限逻辑，可以使用这两个路由守卫

进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {  },

离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {  }

<template>
  <div>
    我是User的内容
  </div>
</template>

<script>
export default {
  name:'User',

  // 进入守卫：通过路由规则，进入该组件时被调用
  beforeRouteEnter (to, from, next) {
    console.log("beforeRouteEnter被调用")
    if(to.meta.isAuth){
      if(localStorage.getItem('username') === "唯一的阿金"){
        next()
      }else{
        alert('用户名不正确，没有权限查看！')
      }
    }else{
      next()
    }
  },

  //离开守卫：通过路由规则，离开该组件时被调用
  beforeRouteLeave (to, from, next) {
    console.log("beforeRouteLeave被调用",to,from)
    next()
  }
}
</script>

<style scoped>
  div{
    width: 400px;
    height: 400px;
    background-color: lightsalmon;
    margin: 50px 200px;
   
  }
</style>

 

注意： beforeRouteEnter 和 beforeRouteLeave 与 前置、后置路由守卫不同 ！beforeRouteEnter 和 beforeRouteLeave 分别是进入组件、离开组件被调用，只进入该组件、不离开该组件（也就是，进入该组件后，不点击其他组件），beforeRouteLeave 不会被调用。但是，当路由组件切换后，全局前置、后置路由守卫是两个先后被调用。

二、 缓存路由组件

1.作用

让不展示的路由组件保持挂载，不被销毁，当我们重新切回来时，还保持着之前的数据，比如，在文本框中输入数据，然后切换到其他页面，再切换到之前的文本框界面，则文本框的数据仍然保存着。

2.前提知识

当组件被切换后，如果我们不做什么配置，该组件默认会被自动销毁

3.编码方法

在该路由组件的展示区，写如下代码，include的值表示，要缓存的是哪个路由组件

不写include，表示 <router-view>展示的所有路由组件都被缓存

<keep-alive include="User"> 
    <router-view></router-view>
</keep-alive>

PS：路由还涉及了生命周期的2个钩子，会在后面总结生命周期时，一块讲解。