vue router 导航守卫生命周期

导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。(记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫。)

具体有哪些?

router.beforeEach((to, from, next) => {             //全局前置守卫
router.beforeResolve((to, from, next) => {          //全局解析守卫
router.afterEach((to, from) => {                    //全局后置钩子

beforeEnter: (to, from, next) => {                  //路由独享守卫,在route里定义。

beforeRouteEnter (to, from, next) {                 //组件内定义守卫
beforeRouteUpdate (to, from, next) {                //组件内定义守卫
beforeRouteLeave (to, from, next) {                 //组件内定义守卫

router.onReady(callback, [errorCallback]) //在路由完成初始导航时调用,这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件。

注意:

1、这些守卫都是中间件模式,,,可以定义多个,按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中

2、什么时候结束? 在上述函数参数中,大部分都有一个 next() ,若最后一个 next 被调用了, 那么,则导航的状态就是confirmed(确认的)。

3、被确认后 要调用哪个? onReady() 函数。

4、beforeResolve 是在 被确认的 前一刻 调用。(区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。)

5、上面 大部分守卫 都无法访问到 vm 实例的。有三个组件内的守卫,其中两个可以访问到vm实例。

6、在整个路由流程中,完成离开流程后,,,最后一步是哪个?

最后一个是组件内的 beforeRouteEnter 这个守卫,,,到这里时,组件实例还未创建,不能访问 this,此时开始组件生命周期,完了后把组件 this 传递 给 beforeRouteEnter 的next 回调。结束。

完整的导航解析流程

  • 导航被触发。
  • 在失活的组件里调用离开守卫。
  • 调用全局的 beforeEach 守卫。
  • 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  • 在路由配置里调用 beforeEnter。
  • 解析异步路由组件。若有,先下载异步组建。
  • 在被激活的组件里调用 beforeRouteEnter。
  • 调用全局的 beforeResolve 守卫 (2.5+)。
  • 导航被确认。调用全局的 afterEach 钩子。再调用onReady(仅首次加载页面完响应,以后切路由都不会)。
  • 非重用组件,开始组件实例的生命周期 beforeCreate,created,beforeMount,mounted
  • 触发 DOM 更新。
  • 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

Vue2.0完整生命周期(包括路由守卫):https://www.jianshu.com/p/7ff8f31afebe

实际使用中各种问题汇总:

1、beforeEach 不响应?

new Vue({
  el: '#app', 。
  router,
  store,
  components: { App },
  template: '<App/>'
})

router.beforeEach((to, from, next) => {
  console.log('beforeEach 1...')
  next();
});

router.beforeResolve((to, from, next) => {
  console.log('beforeResolve 1...')
  next();
});

router.onReady(() => {
  console.log('onReady 1...')
});

router.afterEach((to, from) => {
  console.log('afterEach 1...')
});

//在有路由的url:http://localhost:8080/selectgid 强刷浏览器。。。。结果:

beforeResolve 1...
afterEach 1...
onReady 1...

// 原因:在new Vue 解析执行时,router守卫beforeEach就已经过了。这时的beforeEach还没定义。
// 解决:把 beforeEach 定义 放在 new Vue() 前面即可。

beforeEach 1...
beforeResolve 1...
afterEach 1...
onReady 1...

//总结:导航守卫定义时,尽量放在前面。

2、首页强刷页面时,好几个守卫不响应?

//在首页url:http://localhost:8080/ 强刷浏览器。。。。结果:
//注意,首页 / 并没有配置任何 router

beforeEach 1...
onReady 1...

//解决: 把 首页 / 加到 router里面,配上一个component

beforeEach 1...
beforeResolve 1...
afterEach 1...
onReady 1...

//原因:beforeResolve是等组件内守卫执行后才会调用。没有组件的话,当然不会调用。
//结论: 最好给首页加一个route

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

16.9K15
来自专栏向治洪

ReactJs和React Native的那些事

介绍  1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你...

19710
来自专栏我和我大前端的故事

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

943
来自专栏星流全栈

最新的15 个有趣的前端库(December 2016)

1533
来自专栏liuchengxu

如何使用 Vim 的 help

实际上,无论是 Vim 的基础知识还是进阶知识,大都可以从 help 中找到指引。但是我想很多人并没有意识到这一点,或者并没有重视这一点。RTFM (read ...

702
来自专栏做全栈攻城狮

小白学编程实战项目-利用Winform开发美女音乐播放器

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面向对象编程浅聊,...

1853
来自专栏理论坞

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具...

1673
来自专栏思衍 Jax 专栏

企鹅辅导课程详情页毫秒开的秘密 - PWA 直出

随着近几年的前端技术的高速发展,越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例,从性能角度,其最重要的指标...

90911
来自专栏雪地二货笔记库

架构模式之MVVM

  MVVM是一种较为新颖的架构模式,在本文中会涉及一小点vue代码,建议在阅读本文档前先对这门技术做一些学习。

41020
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十节)1. 详情页面的布局2. 从主页面到详情页面的跳转问题

3264

扫码关注云+社区