-
2022-03-30 08:53:14
所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数,
我们把它称之为vue路由守卫vue的路由守卫分为三种:
全局路由守卫
、组件内路由守卫
和路由独享守卫
1.每个守卫方法接收三个参数:
-
to : 即将要进入的目标 路由对象
-
from : 当前导航正要离开的路由
-
next : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数(是否接着往下执行,若不写
next()
,则页面不会往下执行
2.全局路由守卫
全局路由守卫分为两种:全局前置守卫和全局后置钩子全局前置守卫
router.beforeEach((to, from, next) => { next() })
全局后置钩子
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身router.afterEach( (to,from )=> { console.log(to); console.log(from); })
afterEach用的少,beforeEach用的多2.路由独享守卫
在
router
文件夹里的index.js
里相对应的路由中写入beforeEnter: (to, from, next) => { next() }
3.组件内路由守卫
要设置的组件内部使用,和data同级
组件内路由守卫有三种方法:
beforeRouteEnter:
beforeRouteEnter ((to, from, next)=> { next() })
beforeRouteUpdate :
beforeRouteUpdate ((to, from, next) => { next() })
beforeRouteLeave :
beforeRouteLeave((to, from, next) => { next() })
路由独享守卫,守的是path
组件内部守卫,守的是component
更多相关内容 -
-
vue路由守卫,限制前端页面访问权限的例子
2020-10-16 00:28:03今天小编就为大家分享一篇vue路由守卫,限制前端页面访问权限的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
Vue路由守卫及页面登录权限控制的设置方法
2021-01-08 13:26:29Vue路由守卫及页面登录权限控制的设置方法①先在我们的登录页面存储一个登录数据② 添加路由守卫方法一: 直接在路由中添加方法二:当我们使用的是export default 方法时可以在main.js中添加 router.beforeEach((to,... -
vue路由守卫及路由守卫无限循环问题详析
2021-01-19 19:18:23const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 ... -
vue 路由守卫(导航守卫)及其具体使用
2020-11-21 05:07:10最近在学习vue,感觉路由守卫这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 官方文档 导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有... -
vue路由守卫
2022-03-30 09:17:29路由守卫分为三种 ——分别是:全局路由守卫、组件路由守卫、独享路由守卫。 一.全局守卫 全局守卫又分为全局前置守卫、和后置守卫 1. router.beforeEach((to,from,next)=>{}) 回调函数中的参数,to:进入到...路由守卫分为三种 ——分别是:全局路由守卫、组件路由守卫、独享路由守卫。
一.全局守卫
全局守卫又分为全局前置守卫、和后置守卫
1. router.beforeEach((to,from,next)=>{})
回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。
从名字全局前置守卫不难理解,它是全局的,即对 整个单页应用(SPA) 中的所有路由都生效,所以当定义了全局的前置守卫,在进入每一个路由之前都会调用这个回调,那么如果你在回调中对路由的跳转条件判断出错,简单点就是死循环…因为你遗漏了某种路由跳转的情况,守卫会一直执行。所以在使用全局前置守卫的时候一定要判断清楚可能会出现的路由跳转的情况。
2.router.afterEach((to, from) => {})
只有两个参数,to:进入到哪个路由去,from:从哪个路由离。
理解了全局前置守卫,那么全局后置守卫也就那么一回事。全局后置守卫是整个单页应用中每一次路由跳转后都会执行其中的回调。所以多用于路由跳转后的相应页面操作,并不像全局前置守卫那样会在回调中进行页面的重定向或跳转。
二.组件内的守卫
组件路由守卫分为到达这个组件时,离开这个组件时
1. beforeRouteEnter:(to,from,next)=>{}——到达
to,from参数与上面使用方法一致。next回调函数略有不同。
2. beforeRouteLeave:(to,from,next)=>{}——离开
点击其他组件时,判断是否确认离开。确认执行next();取消执行next(false),留在当前页面。
三.路由独享的守卫
1. beforeEnter:(to,from,next)=>{}
与全局路由守卫用法一致,但是只能针对一个页面使用
-
Vue路由守卫
2022-03-13 20:59:16vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。 路由前置守卫: 你可以使用router.beforEach注册一个全局前置守卫: ...vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的。
路由前置守卫:
你可以使用router.beforEach注册一个全局前置守卫:
当导航路由触发时,全局前置守卫会按照顺序调用。
to:即将要进入的目标。
from:将要离开的路由。
全局解析路由:
你可以用router.beforeResolve注册一个全局守卫。
router.beroeResolve是获取数据和执行任何其他操作。
全局后置钩子:
你也可以注册一个全局后置钩子,然而和守卫不同的是,这些钩子不会接受next函数也不会改变导航本身:
路由独享守卫:
你可以直接在路由配置上定义一个beforeEnter守卫:
路由独享守卫是在路由配置页面单独给路由配置一个守卫。
完整的导航解析流程:
导航被触发。
在失活的组件里调用beforeRouterleave守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。 -
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020-10-15 11:42:22主要介绍了Vue路由守卫及页面登录权限控制的设置方法,本文通过实例代码通过两种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 -
【Vue路由守卫】
2022-03-23 14:44:16路由守卫是Vue路由中常用的一个知识点,其作用就是对用户的操作进行一些权限控制,在一些特定的环境下,避免不了使用它
Vue路由守卫
路由守卫,简单理解来说就是,当用户要进行一些操作时,我需要用户的一些信息或数据或行为,我判断过后,才会同意用户进行操作,说到这里,我想大家心里都或多或少有点理解了吧,官方一点的解释就是进行操作的鉴权,当操作与之条件匹配时,操作成功,当操作与之不匹配时,操作终止,作用就是是对路由进行权限控制。
在Vue中,路由守卫分为三种:全局路由守卫、独享路由守卫以及组件内路由守卫
全局路由守卫
全局路由守卫,顾名思义,一旦配置,那么作用范围就是所有的路由,全局路由又分为全局前置守卫和全局后置守卫
全局前置守卫
全局前置守卫,组件初始化时调用,每次路由切换之前调用,路由切换之前指的就是,举个例子说,当前我在A路由组件,我要切换到B路由组件,那么前置路由守卫就是在我点了切换按钮,但B路由组件还没有被呈现在页面上的时候被调用。
//全局前置守卫 router.beforeEach((to,from,next) =>{ //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象 //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象 //第三个参数next(),是否往下执行,执行的话,如果不写的话路由就不会跳转,操作将会终止 })
全局后置守卫
全局后置守卫,组件初始化时调用,每次路由切换之后调用,路由切换之后指的就是,举个例子说,当前我在A路由组件,我要切换到B路由组件,那么前置路由守卫就是在我点了切换按钮B路由组件呈现到页面中后被调用。
router.afterEach((to,from) =>{ //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象 //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象
实例代码:
下面我写的实例是当时看网课尚硅谷老师教的,结合浏览器的Local Storage做出鉴权操作:
主要的就是src/store/index.js
文件中的配置
src/store/index.js:
//该文件用于创建整个应用的router //首先,需要引用vue-router import VueRouter from "vue-router"; //引入路由组件 import TestA from '../pages/TestA' import TestB from '../pages/TestB' // 引入二级路由组件 import TestBHzw from '../pages/TestBHzw' import TestBHyrz from '../pages/TestBHyrz' import DataList from '../pages/DataList' //创建并暴露一个VueRouter const router = new VueRouter({ routes:[ //配置路由路径和路由组件 { //这里的路径可自由定义,但是为了初学者好理解,我就采用和组件同样的命名,防止在写路径的时候搞混 name:'导航一', path:'/TestA', component:TestA, //要跳转到的组件 children:[ { // 给二级路由起名字 name:'DataName', path:'DataList/:introduce', //起到占位作用 component:DataList } ] }, { name:'导航二', path:'/TestB', component:TestB, meta:{isAuth:true,}, // 配置二级路由 children:[ { path:'TestBHzw', //重点注意,不要加 / component:TestBHzw }, { path:'TestBHyrz', component:TestBHyrz } ] } ] }) //全局前置路由,配合浏览器localStorage进行鉴权操作 router.beforeEach((to, from, next) =>{ //首先,我们先看一看to和from参数,next就是执行的意思,不写页面是不会跳转的 // console.log(to, from); if(to.meta.isAuth){ //判断是否需要鉴权 if(localStorage.getItem('name') === '张三'){ next(); }else{ alert('不好意思,姓名不对,没有权限'); } }else{ next() } }) // 全局后置路由,简单写一个弹窗,在进入每一个路由组件后弹出一句话 router.afterEach(() =>{ alert('欢迎你!!'); }) export default router;
TestA.vue:
<template> <div> <h4>著名动漫简介</h4> <ul> <li v-for="i in DataList" :key="i.id"> <!-- 使用params参数传递动态参数 注意:params传递参数必须配合name属性--> <router-link :to="{ name:'DataName', params:{ introduce:i.introduce } }">{{i.name}}</router-link> </li> </ul> <router-view></router-view> </div> </template> <script> export default { name:'TestA', data(){ return{ DataList:[ { id:1, name:'《海贼王》', introduce:'《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品,于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。' }, { id:2, name:'《火影忍者》', introduce:'电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画,2002年10月3日在东京电视台系列全6局、岐阜放送首播,共220话;第二季《火影忍者疾风传》于2007年2月15日-2017年3月23日在东京电视台播出,共500话;累计全720话。' }, { id:3, name:'《斗破苍穹》', introduce:'《斗破苍穹》是一部由阅文集团旗下起点中文网作家天蚕土豆同名玄幻长篇经典小说改编的动画。该动画第一季已于2017年1月7日在腾讯视频上映,bilibili同步跟播,共十二集。' }, { id:4, name:'《鬼灭之刃》', introduce:'《鬼灭之刃》是日本漫画家吾峠呼世晴所著的少年漫画,自2016年2月15日—2020年5月11日在集英社《周刊少年Jump》上连载。已完结。' } ] } } } </script> <style scoped> h4{ text-align: center; } a{ text-decoration: none; } .active:visited{ color: brown; } </style>
TestB.vue:
<template> <div> <h4>我是内容二</h4> <!-- 多级路由 --> <div class="box"> <!-- 此处路径一定要写完整路径 --> <router-link to="/TestB/TestBHzw" active-class="active">点击查看《海贼王的简介》</router-link> <router-link to="/TestB/TestBHyrz" active-class="active">点击查看《火影忍者的简介》</router-link> <hr> <router-view></router-view> </div> </div> </template> <script> export default { name:'TestB', } </script> <style scoped> h4{ text-align: center; } .box{ text-align: center; } a{ text-decoration: none; } .active:visited{ color: brown; } </style>
DataList.vue:
<template> <div> <ul> <!-- 采用插值语法就可以拿到父级路由中的数据 --> <li>{{$route.params.introduce}}</li> </ul> </div> </template> <script> export default { name:'DataList' } </script> <style> </style>
TestBHzw.vue和TestBHyrz.vue的结构是一样的,就不重复展示了:
<template> <div> <p> 电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画, 2002年10月3日在东京电视台系列全6局、岐阜放送首播,共220话; 第二季《火影忍者疾风传》于2007年2月15日-2017年3月23日在东京电视台播出,共500话;累计全720话。 </p> </div> </template> <script> export default { name:'TestBHyrz' } </script> <style> </style>
当然,想要配置路由守卫,前提就是把基本的路由配置好
因为不管是前置守卫和后置守卫,都有三个参数,netx()我们已经说过,不写的话不会往下一步走,
那么我们输出一下to和from看看
当前页面是初始化页面,所以此时输出的to, from都是空对象。
当我们点击 “导航一” 时,to里面有了新内容,为什么from没有呢,是因为我们处于最顶层初始化页面,在我们点击之前,我们是没有路由的,所以只能捕获到我们要去往哪一个路由组件,匹配不到我们来自哪一个路由组件
当我们处于第一级路由的 “导航一” 跳往 “导航二” 时,此时的to和from就显而易见了
要想配合localStorage来实现鉴权,我们就要先在浏览器中给他一对key—value
现在我们就可以把鉴权的操作写在前置守卫中了
后置守卫就简单实现一下进入组件后实现弹窗
此时我们切换到“导航二”组件时,前置路由守卫已经拒绝了我们的访问,那是因为我在鉴权操作中,
匹配的名字是“张三”
把名字改为“王五”后,我们可以正常访问“导航二”组件了
独享守卫
组件独享守卫是在进入组件时被调用,区别就在于,想对那个路由进行权限控制就直接在其路由配置项中添加守卫,作用域也仅限于该路由
beforeEnter(to,from,next){ //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象 //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象 //第三个参数next(),是否往下执行,执行的话,如果不写的话路由就不会跳转,操作将会终止 }
可自行去尝试,其实效果都是一样的,只不过,全局路由守卫服务的是所有路由组件,而独享路由守卫只服务于被配置的单个路由组件
组件内守卫
当使用路由规则进入该组件或离开该组件时,就会触发组件内守卫的调用,而组件内守卫的作用于范围也仅限于该组件
//进入守卫:通过路由规则,进入该组件时被调用 beforeRouteEnter (to, from, next) { //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象 //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象 //第三个参数next(),是否往下执行,执行的话,如果不写的话路由就不会跳转,操作将会终止 }, //离开守卫:通过路由规则,离开该组件时被调用 beforeRouteLeave (to, from, next) { //第一个参数to,包含的内容是切换后的路由对象,也就是跳转后的路由对象 //第二个参数from,包含的内容的是切换前的路由对象,也就是跳转前的路由对象 //第三个参数next(),是否往下执行,执行的话,如果不写的话路由就不会跳转,操作将会终止 }
唯一不同于之前的就是
BeforeRouterLeave(),它并不像全局后置守卫一样在路由组件加载完成之后调用,而是在你切换出这个组件后被调用,也就是离开这个组件后被调用,在开发中,我们也可以使用BeforeRouterLeave() 来完成某些操作,比如当我要切换出该组件事,我希望该组件的操作能暂停,而不是一直运行,只有当我切换回该组件时,又再次运行,这样的操作就可以配合着beforeRouteEnter() 来完成,也可以提高应用的性能
总结
路由守卫在实际开发过程中是一个较为重要的知识点,其作用和功能在实际开发中也大大方便了我们的开发,在对用户鉴权操作时也提高了我们编写代码的小效率,以上就是我个人在学习时对路由守卫的理解和笔记。
纸上得来终觉浅,绝知此事要躬行!!创作不易,记得点赞收藏加关注哟
-
vue 路由守卫
2019-12-31 09:46:24全局守卫 //全局守卫写在main中 //router对象调用 //beforeEach((进入到哪一个路由,从哪一个路由离开,对应的函数)=>{}) router.beforeEach((to,form,next) =>{ //如果进入到的路由是登录页或者注册页面,... -
Vue路由守卫之路由独享守卫
2020-12-13 11:12:07路由独立守卫,顾名思义就是这个路由自己的守卫任务,就如同咱们LOL,我们守卫的就是独立一条路,保证我们这条路不要被敌人攻克(当然我们也得打团配合) 在官方定义是这样说的:你可以在路由配置上直接定义 ... -
vue路由守卫的使用介绍
2022-01-12 15:49:35导航守卫其实也是路由守卫,也可以是路由拦截,我们可以通过路由拦截,来判断用户是否登录,该页面用户是否有权限浏览, 导航守卫分为:全局守卫组件内的守卫路由独享的守卫完整的导航解析流程 全局守卫 //全局守卫... -
vue路由守卫,路由拦截,导航守卫
2022-04-01 15:11:16vue⼀共给我们提供了三种路由守卫 全局路由守卫 前置守卫: router.beforeEach((to,from,next) => {}) to-到哪里去 from --从哪里来 next–重定向 //路由拦截 我们经常使⽤路由守卫实现⻚⾯的鉴权 router.... -
vue路由守卫的执行顺序
2022-03-21 22:12:44**全局路由导航守卫**:beforEach afterEach **路由独享导航守卫**:beforEnter **组件内导航**: beforRouteEnter beforeRouteUpdate beforeRouteLeave **beforEach 与 beforEnter 的区别**:前置针对所有路由,后... -
vue 路由守卫的使用
2022-04-18 22:18:53to.name) { return next('/error') } else { return next() } } // 如果token不存在返回登录 else { return next('/') } } }) 在vue项目的router.js里面使用 router.beforeEach((to, from, next) => { //这里写... -
Vue路由守卫详解
2020-10-22 09:08:20Vue路由守卫详解 路由导航过程中有若干生命周期钩子,可以在这里实现逻辑控制。 全局守卫,router.js //路由配置 { path: '/about', name: "about", meta: {auth: true}, //需要认证 component: ()=>... -
vue路由守卫有哪三种类型
2022-03-08 15:58:49vue中路由守卫一共有三种,分别为:全局路由守卫(全局前置守卫、全局后置守卫),组件内路由守卫,路由独享守卫(是在路由配置页面单独给路由配置的一个守卫)。 路由守卫,也可以是路由拦截,我们可以通过路由... -
vue路由守卫死循环及next原理解释
2022-04-22 20:21:14 在使用vue路由守卫的beforeEach方法时可能会出现无限递归,也就是死循环的问题,根本原因在于next()方法在不合适的地方错误调用所致,先来看一下官方对next()方法的解释: beforeEach方法体: router.beforeEach... -
前端面试题——vue路由守卫
2022-04-22 15:50:30vue路由守卫? 详解页面权限 - 所谓的路由守卫就是我们进行页面跳转的时候触发的钩子函数 - vue一共给我们提供三种路由守卫 - 全局路由守卫 beforeEach afterEach - 组件路由守卫 beforeRouterEnter ... -
解决vue路由守卫报错信息
2021-05-25 11:08:30const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) { return originalPush.call(this, location, ...