“约见”面试官系列之常见面试题之第九十八篇之vue-router有哪几种导航钩子（建议收藏）

1.导航钩子的作用

2.导航钩子的分类

3.全局守卫

4.路由独享守卫

5.局部守卫

6.路由跳转导航解析流程，当由A路由–>B路由的时候

1.导航钩子的作用

vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。

2.导航钩子的分类

全局守卫
路由独享守卫
局部守卫

3.全局守卫

是指路由示例上直接操作的钩子函数，特点是所有路由配置的组件都会触发。简单点说就是触发路由就会触发这些钩子函数。钩子函数执行顺序包括beforeEach、beforeResolve、afterEach三个。

[beforeEach]：在路由跳转前触发，参数包括to,from,next三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

 router.beforeEach  router.beforeResolve  router.afterEachconst router = new VueRouter({ ... });router.beforeEach((to, from, next) => {// do someting});

to：代表要进入的目标，它是一个路由对象
from：代表当前正要离开的路由，同样也是一个路由对象
next：这是一个必须需要调用的方法，而具体的执行效果则依赖next方法调用的参数

[beforeResolve]：这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：

 区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就会被调用。

即在beforeEach和组件内beforeRouteEnter之后，afterEach之后，afterEach之前调用。

[afterEach]：和beforeEach相反，它是在路由跳转完成之后触发，参数包括to、from，没有了next，它发生在beforeEach和beforeResolve之后，beforeRouteEnter(足迹按内守卫)之前。

const router = new VueRouter({ ... });router.beforeEach((to, from, next) => {// do someting});//全局后置钩子，后置钩子并没有 next 函数，也不会改变导航本身router.afterEach((to, from) => {// do someting});

4.路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数，且只能在这个路由下起作用。其位置如下，也就是像File这样的组件都存在这样的钩子函数。目前它只有一个钩子函数beforeEnter。

[beforeEnter]：和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数有to、from、next。

  cont router = new VueRouter({routes: [{path: '/file',component: File,beforeEnter: (to, from ,next) => {// do someting}}]});

5.局部守卫

是指在组件内执行的钩子函数，类似于数组内的生命周期函数，相当于为配置路由的组件添加的生命周期钩子函数。钩子函数按执行顺序包括beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave三个，执行位置如下：

 const File = {template: `<div>This is file</div>`,beforeRouteEnter(to, from, next) {// do someting// 在渲染该组件的对应路由被 confirm 前调用},beforeRouteUpdate(to, from, next) {// do someting// 在当前路由改变，但是依然渲染该组件是调用},beforeRouteLeave(to, from ,next) {// do someting// 导航离开该组件的对应路由时被调用}}

routes:[{path:'/b',component:B,beforeEnter:(to,form,next)=>{..... }}]

4.再执行B组件的进入守卫。 B组件中beforeRouterEnter
5. 调用全局的beforeResolve守卫(2.5+)。 router.beforeResolve
6. 导航被确认。
7. 调用全局的afterEach钩子。 router.afterEach
8. 触发DOM更新。

“约见”面试官系列之常见面试题之第九十八篇之vue-router有哪几种导航钩子（建议收藏）相关推荐

“约见”面试官系列之常见面试题之第九十五篇之vue-router的组件组成（建议收藏）
<router-link :to='' class='active-class'> //路由声明式跳转 ,active-class是标签被点击时的样式<router-view> ...
“约见”面试官系列之常见面试题之第九十四篇之MVVM框架（建议收藏）
目录一句话总结:vm层(视图模型层)通过接口从后台m层(model层)请求数据,vm层继而和v(view层)实现数据的双向绑定. 1.我大前端应该不应该做复杂的数据处理的工作? 2.mvc和mvvm ...
“约见”面试官系列之常见面试题之第九十二篇之created和mounted区别（建议收藏）
beforeCreate 创建之前:已经完成了初始化事件和生命周期 created 创建完成:已经完成了初始化注册和响应 beforeMount 挂载之前:已经完成了模板渲染 mounted :挂 ...
“约见”面试官系列之常见面试题第三十八篇之js常见的继承方式（建议收藏）
1.原型链继承核心: 将父类的实例作为子类的原型将构造函数的原型设置为另一个构造函数的实例对象,这样就可以继承另一个原型对象的所有属性和方法,可以继续往上,最终形成原型链父类 // 定义一个动物 ...
“约见”面试官系列之常见面试题之第九十九篇之router和route（建议收藏）
1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了 ...
“约见”面试官系列之常见面试题之第九十九篇之router的钩子函数（建议收藏）
当使用路由参数时,例如从 /user/aside导航到 /user/foo,原来的组件实例会被复用.因为两个路由都渲染同个组件,比起销毁再创建,复用则更加高效.不过,这也意味着组件的生命周期钩子不会再 ...
“约见”面试官系列之常见面试题之第九十六篇之active-class是谁的属性（建议收藏）
active-class 属于vue-router的样式方法,当router-link标签被点击时将会应用这个样式一.首先,active-class是什么,active-class是vue-rout ...
“约见”面试官系列之常见面试题之第九十篇之页面加载触发函数（建议收藏）
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子本面试题为前端常考面试题,后续有机会继续完善.我是歌谣,一个沉迷于故事的讲述 ...
“约见”面试官系列之常见面试题第四十四篇之webpack打包原理解析？（建议收藏）
webpack打包是如何运行的也可以称为,webpack是如何实现模块化的 CommonJS是同步加载模块,一般用于node.因为node应用程序运行在服务器上,程序通过文件系统可以直接读取到各个模 ...

“约见”面试官系列之常见面试题之第九十八篇之vue-router有哪几种导航钩子（建议收藏）

1.导航钩子的作用

2.导航钩子的分类

3.全局守卫

4.路由独享守卫

5.局部守卫

6.路由跳转导航解析流程，当由A路由–>B路由的时候

“约见”面试官系列之常见面试题之第九十八篇之vue-router有哪几种导航钩子（建议收藏）相关推荐

最新文章

热门文章