vue路由钩子函数是哪几种

发布时间:2021-10-28 09:58:06 作者:iii
来源:亿速云 阅读:492

这篇文章主要介绍“vue路由钩子函数是哪几种”,在日常操作中,相信很多人在vue路由钩子函数是哪几种问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue路由钩子函数是哪几种”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

vue路由钩子函数有2种,分别为:1、全局守卫(全局钩子函数),指的是“index.js”中的router对象;2、路由守卫(针对单个路由钩子函数);3、组件守卫(组件级钩子函数),是定义在路由组件内部的守卫。

vue路由钩子函数是哪几种

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

vue-router钩子函数 ,其实说的就是 导航守卫

引用官网的话

导航” 表示路由正在发生改变。

vue-router 提供的导航守卫主要用来通过 跳转取消 的方式 守卫导航 。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

也就是:全局守卫(全局钩子函数)路由守卫(针对单个路由钩子函数)组件守卫(组件级钩子函数)

代码演示环境搭建

先简单搭建一下环境

index.js

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/a',
      component: () => import('../components/A.vue'),
    },
    {
      path: '/b',
      component: () => import('../components/B.vue'),
    },
    {
      path: '/c',
      component: () => import('../components/C.vue'),
    },
  ],
});
export default router;

main.js

// index.js
import router from "./router"; 
createApp(App).use(router).mount("#app");

页面A

<template>
  <div>
    <h2>我是页面A啊</h2>
    <comp></comp>
  </div>
</template>

页面B

<template>
  <div>
    <h2>我是页面B啊</h2>
    <comp></comp>
  </div>
</template>

页面C

<template>
  <div>
    <h2>我是页面C啊</h2>
    <comp></comp>
  </div>
</template>

通用组件

<template>
  <div>我是公用组件啊</div>
</template>

当前页面是这样的,有点丑,凑活看吧,咱也不是来学习 css

vue路由钩子函数是哪几种

全局守卫

顾名思义,是要定义在全局的,也就是我们 index.js 中的 router 对象。

beforeEach

全局前置守卫,在路由跳转前触发,它在 每次导航 时都会触发。

通过 router.beforeEach 注册一个全局前置守卫。

vue路由钩子函数是哪几种

参数

beforeEach 全局前置守卫接收三个参数

注意: next 参数可以不添加,但是一旦添加,则必须调用一次,否则路由跳转等会停止。

next()方法的几种情况

我们把前两个参数打印出来看一下,里面包含路径,参数,元信息等内容。

vue路由钩子函数是哪几种

返回值

定义多个守卫

全局前置守卫可以定义多个,根据创建顺序调用。在所有守卫完成之前导航一直处于等待中。

下面这个例子中我们就定义了两个 beforeEach 全局前置守卫。可以看到,只有在两秒以后分别打印出两条日志后才进行页面的跳转。

vue路由钩子函数是哪几种

vue路由钩子函数是哪几种

除了 beforeEach 全局前置守卫之外,其他的全局守卫都可以定义多个,并且在所有守卫完成之前导航一直处于等待中,其他的钩子函数就不进行演示了。

beforeResolve

全局解析守卫,在路由跳转前,所有 组件内守卫异步路由组件 被解析之后触发,它同样在 每次导航 时都会触发。

通过 router.beforeResolve 注册一个全局解析守卫。

router.beforeResolve((to, from, next) => {
  next();
})

回调参数,返回值和 beforeEach 一样。也可以定义多个全局解析守卫。

afterEach

全局后置钩子,它发生在路由跳转完成后,beforeEachbeforeResolve 之后,beforeRouteEnter(组件内守卫)之前。它同样在 每次导航 时都会触发。

通过 router.afterEach 注册一个全局后置钩子。

vue路由钩子函数是哪几种

这个钩子的两个参数和 beforeEach 中的 tofrom 一样。然而和其它全局钩子不同的是,这些钩子不会接受 next 函数,也不会改变导航本身。

路由守卫

顾名思义,就是跟路由相关的钩子,我们的路由守卫只有一个,就是 beforeEnter

beforeEnter

需要在路由配置上定义 beforeEnter 守卫,此守卫只在进入路由时触发,在 beforeEach 之后紧随执行,不会在 paramsqueryhash 改变时触发。

vue路由钩子函数是哪几种

beforeEnter 路由守卫的参数是 tofromnext ,同 beforeEach 一样。

组件守卫

顾名思义,是定义在路由组件内部的守卫。

beforeRouteEnter

vue路由钩子函数是哪几种

路由进入组件之前调用,该钩子在全局守卫 beforeEach 和路由守卫 beforeEnter 之后,全局 beforeResolve 和全局 afterEach 之前调用。

参数包括 tofromnext

该守卫内访问不到组件的实例,也就是 thisundefined,也就是他在 beforeCreate 生命周期前触发。

beforeRouteUpdate

vue路由钩子函数是哪几种

对于 beforeRouteUpdate 来说,this 已经可用了,所以给 next 传递回调就没有必要了。

beforeRouteLeave

vue路由钩子函数是哪几种

对于 beforeRouteLeave 来说,this 已经可用了,所以给 next 传递回调就没有必要了。

总结

完整的导航解析流程

  1. 导航被触发。

  2. 在失活的组件里调用 beforeRouteLeave 守卫。

  3. 调用全局的 beforeEach 守卫。

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

  5. 在路由配置里调用 beforeEnter

  6. 解析异步路由组件。

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

  8. 调用全局的 beforeResolve 守卫。

  9. 导航被确认。

  10. 调用全局的 afterEach 钩子。

  11. 触发 DOM 更新。

  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

上面是官方给出的答案,现在我们用流程图来直观的展示一下。

vue路由钩子函数是哪几种

到此,关于“vue路由钩子函数是哪几种”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. Vue生命周期钩子函数
  2. Vue的钩子函数[路由导航、keep-alive、生命周期钩子]

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:javascript中接口的作用是什么

下一篇:Mysql数据分组排名实现的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》