Vue2.x与Vue3.x中路由钩子的区别详解

目录
  • vue2.x
    • 前置概念:
      • 路由钩子分类
      • 路由和组件的概念(方便理解钩子函数)
    • 全局路由钩子
    • 路由配置守卫钩子
    • 组件内的守卫钩子
    • 路由钩子执行顺序
      • eg: 从A组件跳转到B组件顺序
      • 如果B路有更新, 每次都会执行以下三个钩子:
  • vue3.x
    • 对比变化图
    • 区别补充:

vue2.x

前置概念:

路由钩子分类

一共分3类, 7个钩子

路由和组件的概念(方便理解钩子函数)

路由和组件是2个概念, 可以粗犷的认为:

  • 路由是浏览器网址
  • 组件是显示在网页上的不同内容

全局路由钩子

router.beforeEach(to, from, next){ } 前置导航守卫

路由进入前

router.afterEach(to, from, next){ } 后置导航守卫

路由进入后

router.beforeResolve(to, from, next){ } 解析守卫

解析组件时, 已经读取所有配置, 前面的关卡都通过了, 准备解析组件前执行

路由配置守卫钩子

beforeEnter() 在读取路由配置信息前调用

在beforeCreate()前执行

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { }
    }
  ]
})

组件内的守卫钩子

beforeRouteEnter(to, from, next){ } 进入组件前

默认不能获取组件实例 this

但是以下办法可以访问

beforeRouteEnter(to, from, next){ 

  // next()的回调函数,在进入路由,实例化执行
	next(vm => {
    // vm等价于当前组件this
  })
}

beforeRouteUpdate(to, from, next){ } 修改组件前

当前组件依然在使用路由地址改变满足以上2个条件才会执行

beforeRouteLeave(to, from, next){ } 离开组件前

路由钩子执行顺序

eg: 从A组件跳转到B组件顺序

beforeRouteLeave() 先离开A组件

beforeEach() 全局-前置导航守卫

beforeEnter() 读取路由配置信息前 (读取B路由信息)

beforeRouteEnter() 进入组件前

beforeResolve() 解析守卫

afterEach() 全局-后置导航守卫

如果B路有更新, 每次都会执行以下三个钩子:

beforeEach() 全局 - 前置导航守卫

beforeResolve() 全局 - 解析守卫

beforeRouteUpdate() 组件内 - 修改组件前

vue3.x

vue3.x相对于vue2.x, 只有小部分不同, 此处只针对不同做讲解

对比变化图

区别补充:

  • 在Vue2.x中, 有3个组件, 如果A组件跳转到B组件, B组件中存在子组件:

B组件中的子组件不会触发路由钩子

  • 在Vue3.x中, 有3个组件, 如果A组件跳转到B组件, B组件中存在子组件:

B组件中的子组件会触发路由钩子: onBeforeRouteUpdate和onBeforeRouteLeave
B组件中的子组件不会触发路由钩子

  • 在Vue3.x中, 有3个组件, 如果A组件跳转到B组件, B组件中存在子组件:

B组件中的子组件会触发路由钩子: onBeforeRouteUpdate和onBeforeRouteLeave

以上就是Vue2.x与Vue3.x中路由钩子的区别详解的详细内容，更多关于Vue2.x与Vue3.x中路由钩子的区别的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 详解Vue2.X的路由管理记录之 钩子函数（切割流水线）

    详解Vue2.X的路由管理记录之 钩子函数（切割流水线）

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生改变   关键字:路由  变 钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数)  两者关系: 钩子函数 ---> 导航 :钩子函数   主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做

  • 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

    详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单

  • Vue的路由及路由钩子函数的实现

    什么是路由 什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径. web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'.(即根据网址找到能处理这个URL的程序或模块) 使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序:当引入vue-router后,我们需要处理的是将组件(components)映射到路由(routes),然后在需要的地方进行使用渲染. 其所包含的功能有: 嵌套的

  • 详解Vue路由钩子及应用场景（小结）

    一. 路由钩子语法 在vue-router的官方文档中, 将路由钩子翻译为导航守卫, 下面是文档中的内容摘要, 大家也可以通过传送门前往官网阅读详细内容 路由钩子 路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的,靠..好拗口啊. 总体来讲vue里面提供了三大类钩子 1.全局钩子 2.某个路由独享的钩子 3.组件内钩子 三种路由钩子中都涉及到了三个参数,这里直接上官方介绍吧 to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 nex

  • 基于Vue2.X的路由和钩子函数详解

    最近上班有些忙,好久没有更新文章,也没学习新的东西. 今天来说说这个路由钩子吧. 导航和钩子函数: 导航:路由正在发生改变 关键字:路由 变 钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数). 钩子函数 主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做.. 导航在所有钩子 resolve 完之前一直处于 等待中,等待钩子函数告诉它下一步该怎么做.用next()来指定. 我来给大家举

  • Vue2.x与Vue3.x中路由钩子的区别详解

    Vue2.x与Vue3.x中路由钩子的区别详解

    目录 vue2.x 前置概念: 路由钩子分类 路由和组件的概念(方便理解钩子函数) 全局路由钩子 路由配置守卫钩子 组件内的守卫钩子 路由钩子执行顺序 eg: 从A组件跳转到B组件顺序 如果B路有更新, 每次都会执行以下三个钩子: vue3.x 对比变化图 区别补充: vue2.x 前置概念: 路由钩子分类 一共分3类, 7个钩子 路由和组件的概念(方便理解钩子函数) 路由和组件是2个概念, 可以粗犷的认为: 路由是浏览器网址 组件是显示在网页上的不同内容 全局路由钩子 router.befor

  • React中useLayoutEffect钩子使用场景详解

    目录 简介 useEffect钩子的概述 钩子流程 useLayoutEffect钩子的概述 钩子流程 什么时候使用useLayoutEffect钩子? 总结 简介 不久前,React对其功能组件进行了一次重大更新(在2019年3月的16.8版本中),终于为这些组件提供了一种变得有状态的方法. 钩子的加入不仅意味着功能组件将能够提供自己的状态,而且还能通过引入useEffect钩子来管理自己的生命周期事件. 此外,这次更新还引入了一个全新的useLayoutEffect钩子,根据React文档,

  • linux shell中“.” 和 “./”执行的区别详解

    目前注意到的区别主要在于环境变量的作用域上: 1. 如果使用" ./ " 执行,可以理解为程序运行在一个全新的shell中,不继承当前shell的环境变量的值, 同时若在程序中改变了当前shell中的环境变量(不使用export),则当前shell的环境变量值不变. 2. 如果使用" . "执行,则程序继承当前shell中的环境变量,同时,若在程序中改变了当前shell中的环境变量(不使用export),则当前shell中该环境变量的值也会改变 另外一个区别点在于,

  • Java中 % 与Math.floorMod() 区别详解

    %为取余(rem),Math.floorMod()为取模(mod) 取余取模有什么区别呢? 对于整型数a,b来说,取模运算或者取余运算的方法都是: 1.求 整数商: c = a/b; 2.计算模或者余数: r = a - c*b. 区别是: 取余运算在计算商值向0方向舍弃小数位 取模运算在计算商值向负无穷方向舍弃小数位 比如a=4,b=-3时,a/b = -1.3333... 此时,取余c=1,取模c=-2 (%在不同语言中有不同的意义,比如Java或者c/c++中%为取余,python中%则为

  • MySQL中in和exists区别详解

    MySQL中in和exists区别详解

    一.提前准备 为了大家学习方便,我在这里面建立两张表并为其添加一些数据. 一张水果表,一张供应商表. 水果表 fruits表 f_id f_name f_price a1 apple 5 a2 appricot 2 b1 blackberry 10 b2 berry 8 c1 cocount 9 供应商表 suppliers表 s_id s_name 101 天虹 102 沃尔玛 103 家乐福 104 华润万家 我们将用这两张表做演示. 二.什么是exists exists关键字后面的参数是一

  • Python Flask中Cookie和Session区别详解

    目录 前言 安装 创建虚拟环境 进入虚拟环境 安装 flask Cookie的使用 Session的使用 前言 本篇文章,阐述一下Flask中Cookie和Session 为什么要说Cookie和Session呢? 答:因为http请求是无状态的,怎么理解呢?当你访问B站时,如果你没有Cookie或者Session,B站就认为你是一个没有登录的用户.如果你有Cookie或Session,那么B站就知道你登录了,并且知道你是谁.所以可以把跟你相关的资料返回 给你两者的区别: 答:Cookie是明文

  • vue3+vue-cli4中使用svg的方式详解(亲测可用)

    vue3+vue-cli4中使用svg的方式详解(亲测可用)

    目录 前言: 一.安装 svg-sprite-loader 二.在src/components/svgIcon下新建组件index.vue 三.在assets在创建icons文件夹 四.在src同级下创建vue.config.js进行配置 五.在main.js里引入,以及做一些小修改 六.在页面中使用 七.文件目录结构及其效果展示 八.参考链接地址 总结 技术栈:vue3+vue-cli4 前言: 目前大多数是基于vue2引入,所以想基于vue3需要做一些改动(注意该方法是基于vue-cli中使

  • vue3.0中友好使用antdv示例详解

    vue3.0中友好使用antdv示例详解

    前言 随着我们vue3.0的出现,我们的ui组件库也有了一些变化,像我们的旧版的element-ui已经不能在vue3.0中使用了,如果要使用element的话需要使用最新版的element-plus,由于发现它并不太好用,因此我选择了Ant Design Vue. 如果我们以前经常使用antd的话,我们使用起来这个上手会非常方便. 在vue3.0中引入我们的antdv 1.首先使用我们的vue/cli创建vue3.0项目并使用less 2. 在vue3.0中使用的话我们需要安装 ant-des

  • vue3+vite2中使用svg的方法详解(亲测可用)

    vue3+vite2中使用svg的方法详解(亲测可用)

    目录 前言: 一.安装vite-plugin-svg-icons 二.在src/components/svgIcon下新建组件index.vue 三.tsconfig.json中添加设置 四.vite.config.ts 中的配置插件 五.在main.ts全局注册组件 六.在页面中使用 七.文件目录结构及其效果展示 八.参考链接地址 总结 技术栈:vue3+vite2 前言: 写过一版基于vue-cli中使用svg的方法,但是因为webpack提供了require.context()在vite中

  • JavaScript中in和hasOwnProperty区别详解

    每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性.搜索首先从对象实例本身开始.如果在实例中找到了具有给定名字的属性,则返回该属性的值:如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性.如果在原型对象中找到了这个属性,则返回该属性的值. 虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值.如果在实例中添加一个与原型中属性同名的属性,则该属性会屏蔽原型中的那个属性.添加的同名属性只会阻止我们访问原型中的那个属性,但不

随机推荐