首页 > 其他分享 >路由守卫

路由守卫

时间:2022-08-26 18:25:06浏览次数:35  
标签:调用 独享 守卫 组件 全局 路由

一.什么是路由守卫:

 通俗的理解,平时我们在商城买东西,把东西加入购物车时,如果没有登录,就会跳入到登录界面,如果登录了,就跳转到购物车界面,就是对路由进行权限控制

守卫分为三种:

  • 全局守卫:(beforeEach,afterEach)
  • 独享守卫:(beforeEnte)
  • 组件内守卫:(beforeRouteEnter ,beforeRouteLeave )

每个守卫方法接收三个参数:

  1. to: 即将去的目标 通俗来说就是到哪里去
  2. from: 即将离开的路由 通俗来说就是从哪里来
  3. next: 是一个方法,必须调用,一定要调用这个方法来解析,执行效果依赖next方法的调用参数

二.守卫类型:

1.全局守卫

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

要想执行守卫,需要在配置路由的地方加上meta:{isAuth:true}

 

 

 

 1.2.全局后置路由守卫:afterEach(每次路由切换之后被调用)

后置路由的作用路由跳转可以更改网页名称

首先在路由中meta中需要配置title

修改网页的title

 

 2.独享路由守卫(beforeEnte))

独享路由守卫只有前置没有后置:某一个路由所单独享用的路由守卫

 

 

3.组件内守卫(某一个路由所单独享用的路由守卫)

组件内守卫的概念与前两者有点不同,前两者都是写在配置路由index.js中的,它是写在某个组件中的

 

通过路由规则,进入该组件时被调用

 

 

 

 

通过路由规则,离开该组件时被调用

 

 

 

标签:调用,独享,守卫,组件,全局,路由
From: https://www.cnblogs.com/MDRY/p/16628547.html

相关文章