关于vue的导航钩子

vue2.0兼容IE哪个版本以上?

答:vue2.0兼容IE9以上


vuex

VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vuex有五个核心概念:

state,getters,mutations,actions,modules。

        1. state:vuex的基本数据,用来存储变量

   2. geeter:从基本数据(state)派生的数据,相当于state的计算属性

   3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

   回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。

   4. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。

    5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理

Vuex的用法:



vue-router有哪几种导航钩子?

vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消

1. 全局导航钩子: 前置守卫、后置钩子 

注册一个全局前置守卫

这三个参数 to 、from 、next 分别的作用:

1.to: router,代表要进入的目标,它是一个路由对象

2.from: router,代表当前正要离开的路由,同样也是一个路由对象

3.next: Function,这是一个必须需要调用的方法,而具体的执行效果则依赖 next 方法调用的参数

解释:

1.next():进入管道中的下一个钩子,如果全部的钩子执行完了,则导航的状态就是 confirmed(确认的)

2.next(false):这代表中断掉当前的导航,即 to 代表的路由对象不会进入,被中断,此时该表URL地址会 被重置到 from 路由对应的地址

3.next(‘/’)和next({path:‘/’}):在中断掉当前导航的同时,跳转到一个不同的地址

4.next(error):如果传入参数是一个Error实例,那么导航被终止的同时会将错误传递给 router.onError()注册过的回调

注意:next 方法必须要调用,否则钩子函数无法 resolved


全局后置钩子


                                                                不同于前置守卫,后置钩子并没有 next 函数,也不会改变导航本身

2. 路由独享的钩子

顾名思义,即单个路由独享的导航钩子,它是在路由配置上直接进行定义的:


至于他的参数的使用,和全局前置守卫是一样的

3. 组建内的导航钩子

组件内的导航钩子主要有这三种:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

他们是直接在路由组件内部直接进行定义的:


用法


注意:

beforeRouteEnter 不能获取组件实例 this,因为当守卫执行前,组件实例被没有被创建出来,剩下两个钩子则可以正常获取组件实例 this,但是并不意味着在 beforeRouteEnter 中无法访问组件实例,我们可以通过给 next 传入一个回调来访问组件实例。在导航被确认是,会执行这个回调,这时就可以访问组件实例了


比如

这里仅仅是 beforRouteEnter 支持给 next 传递回调,其他两个并不支持。因为归根结底,支持回调是为了解决 this 问题,而其他两个钩子的 this 可以正确访问到组件实例,所有没有必要使用回调作者:world_7735链接:https://www.jianshu.com/p/5528c30f866b来源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

最后是完整的导航解析流程:

1、导航被触发

2、在失活的组件里调用离开守卫

3、调用全局的 beforeEach 守卫

4、在重用的组件里调用 beforeRouteUpdate 守卫

5、在路由配置里调用 beforEnter6、解析异步路由组件

7、在被激活的组件里调用 beforeRouteEnter

8、调用全局的 beforeResolve 守卫

9、导航被确认

10、调用全局的 afterEach 钩子

11、触发 DOM 更新

12、在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容