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

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) {  }

我是User的内容