vue路由全面详解（下）：路由守卫、缓存路由组件（终于要把路由的常用知识写完啦）

二、 缓存路由组件

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’)

}

]

})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用