快速理解Vue路由导航守卫
概念:
“导航”表示路由正在发生变化
vue-router
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程 中:全局的, 单个路由独享的, 或者组件级的。
导航守卫:包括全局导航守卫和局部导航守卫
一、全局守卫
vue-router全局有三个守卫
router.beforeEach
:全局前置守卫,进入路由之前router.beforeResolve
:全局解析守卫,在beforeRouteEnter
调用之后调用(不常用)
router.afterEach
:全局后置钩子,进入路由之后
1.全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫:
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // to和from都是路由实例 // to:即将跳转到的路由 // from:现在的要离开的路由 // next:函数 })
next: Function
: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next()
: 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed
(确认的)。next(false)
: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。- next(‘/') 或者 next({ path: ‘/' }) : 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true 、 name: ‘home' 之类的选项以及任何用在
router-link
的to prop
或router.push
中的选项。 - next(error) : (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会 被传递给
router.onError()
注册过的回调。
注意:如果是next(‘/') 或者 next({ path: ‘/' }),只要带了要放行的路径,那么前面必须有判断,在
什么时候给他放行,不然他会一直循环。
2.全局解析守卫
2.5.0 新增
// 全局解析守卫 router.beforeResolve((to,from.next) => { })
在 2.5.0+ 你可以用 router.beforeResolve
注册一个全局守卫。这和 router.beforeEach
类似,区
别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
3.全局后置钩子
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身:
// 全局后置钩子 router.afterEach((to,form) => { })
因为:afterEach被调用时,路由已经跳转完成,所以不需要next函数
三、路由独享的守卫
如果不想在全局配置路由的话,可以为某些路由单独配置守卫
比如:给mainpage
页面单独配置守卫
{ path: '/mainpage', name: 'About', component: About, // 路由独享守卫 beforeEnter:(to,from,next) => { if(from.name === '/mainpage/about'){ alert("这是从about来的") }else{ alert("这不是从about来的") }next(); // 必须调用来进行下一步操作。否则是不会跳转的 } } },
四、组件内的守卫
最后,你可以在路由组件内直接定义以下路由导航守卫:
beforeRouteEnter():
进入路由前beforeRouteUpdate():
路由复用同一个组件时beforeRouteLeave():
离开当前路由时
在Product中举个例子:
// 全局解析守卫 router.beforeResolve((to,from.next) => { }) // 全局后置钩子 router.afterEach((to,form) => { }) { path: '/mainpage', name: 'About', component: About, // 路由独享守卫 beforeEnter:(to,from,next) => { if(from.name === '/mainpage/about'){ alert("这是从about来的") }else{ alert("这不是从about来的") } next(); // 必须调用来进行下一步操作。否则是不会跳转的 } } }, export default { // 组件内守卫beforeRouteUpdate被触发的条件是:当前路由改变,但是该组件被复用的时候。 比如说:product/orders到product/cart这个路由,都复用了 Product.vue 这个组件,这个时候 beforeRouteUpdate就会被触发。可以获取到this实例。 一个完整的导航解析流程 // 因为这个钩子调用的时候,组件实例还没有被创建出来,因此获取不到this beforeRouteEnter (to, from, next) { console.log(to.name); // 如果想获取到实例的话 // next(vm=>{ // // 这里的vm是组件的实例(this) // }); next(); }, beforeRouteUpdate(to,from,next){ console.log(to.name, from.name); next(); }, // 路由即将要离开的时候调用此方法 // 比如说,用户编辑了一个东西,但是还么有保存,这时候他要离开这个页面,就要提醒他一下,还没保 存,是否要离开 beforeRouteLeave (to, from, next) { const leave = confirm("确定要离开吗?"); if(leave) next() // 离开 else next(false) // 不离开 }, }
beforeRouteUpdate
被触发的条件是:当前路由改变,但是该组件被复用的时候。- 比如说:product/orders到product/cart这个路由,都复用了 Product.vue 这个组件,这个时候
beforeRouteUpdate
就会被触发。可以获取到this实例。
五、一个完整的导航解析流程
- 1、导航被触发。
- 2、在失活的组件(即将离开的页面组件)里调用离开守卫。
beforeRouteLeave
- 3、调用全局的
beforeEach
守卫。 - 4、在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。 - 5、在路由配置里调用(路由独享的守卫)
beforeEnter
。 - 6、解析异步路由组件
- 7、在被激活的组件(即将进入的页面组件)里调用
beforeRouteEnter
。 - 8、调用全局的
beforeResolve
守卫 (2.5+)。 - 9、导航被确认。
- 10、调用全局的
afterEach
钩子。所有的钩子都触发完了。 - 11、触发 DOM 更新。
- 12、用创建好的实例调用
beforeRouteEnter
守卫中传给 next 的回调函数。
到此这篇关于快速理解Vue路由导航守卫的文章就介绍到这了,更多相关Vue路由导航守卫内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.51cto.com/u_15453248/4835392
相关文章
- 这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-27
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
- 这篇文章主要介绍了jQuery实现的导航下拉菜单效果,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-07-06
- 这篇文章主要介绍了基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载,需要的朋友参考下...2016-01-08
- 这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了Bootstrap导航栏各元素操作方法,针对表单、按钮、文本进行操作,感兴趣的小伙伴们可以参考一下...2015-12-29
- 这篇文章主要教会大家如何利用Bootstrap3制作自己的导航栏,设计自己喜欢的元素、样式,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要介绍了Bootstrap多级导航栏的实现代码的相关资料,需要的朋友可以参考下...2016-03-10
- 这篇文章主要介绍了jQuery实现网页顶部固定导航效果代码,涉及jQuery响应scroll事件动态操作页面元素样式的相关技巧,需要的朋友可以参考下...2015-12-25
CSS3 media queries结合jQuery实现响应式导航
这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-02- 这篇文章主要介绍了Bootstrap实现响应式导航栏效果,导航栏是一个很好的功能,是Bootstrap网站的一个突出特点,本文带领大家学习实现Bootstrap导航栏,需要的朋友可以参考下...2015-12-29
在ASP.NET 2.0中操作数据之三:创建母版页和站点导航
本文主要介绍在ASP.NET如何创建母版页以及站点地图等操作,母版页的实现的功能有点类似自定义用户控件,可以实现网站页面统一的设计和布局。...2021-09-22- 本文章来给各位朋友介绍Magento 修正来自首页的产品页面包屑导航实现方法,如果产品是从Category产品列表中进入Product详细页面,则面包屑导航中含有Category Path; 否则...2016-11-25
- 这篇文章主要介绍了jQuery实现B2B网站后台管理系统侧导航,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-09
- 垂直导航效果要如何实现呢,下面我们来看一篇关于css实现漂亮的垂直导航样式,具体的例子如下文介绍,希望文章对各位有帮助。 幻灯片滑动切换的时候,需要做个切换的导航...2017-01-22
- 这篇文章主要介绍了vue-router钩子函数实现路由守卫,对vue感兴趣的同学,可以参考下...2021-04-25
- 这篇文章介绍了利用.net控件实现下拉导航菜单制作的具体方法,有需要的朋友可以参考一下,希望对你有所帮助...2021-09-22
- 这篇文章主要介绍了Vue-router编程式导航的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-04
帝国CMS动态页支持栏目导航标签,万能标签,循环子栏目数据标签的方法
/*解决代码高亮太长不换行*/ .syntaxhighlighter{word-break:break-all;} uParse('#newstext', {rootPath: '/e/extend/ueditor/'}) 帝国CMS动态页是不支持标签调用的,所...2016-08-27- 这篇文章主要介绍了JS实现网站楼层导航效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-17