Vue2.x与Vue3.x中路由钩子的区别详解
作者:SpringSir 发布时间:2024-04-30 10:39:52
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
来源:https://blog.csdn.net/weixin_46873254/article/details/120296035
猜你喜欢
- 一、存储引擎上节我们最后说到,SQL 的执行计划是执行器组件调用存储引擎的接口来完成的。那我们可以理解为:MySQL 这个数据库管理系统是依
- 本文实例讲述了php中debug_backtrace、debug_print_backtrace和匿名函数用法。分享给大家供大家参考。具体分
- 在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪
- #-*- coding:utf-8 -*- from win32com.client import Dispatch import time
- PHP children() 函数实例查找 note 节点的子节点:<?php $note=<<<XML<no
- 偶然从pytorch讨论论坛中看到的一个问题,KL divergence different results from tf,kl dive
- 目录一、网址分析二、代码编写三、遇到的问题1. 获取评论的时候也将子评论爬虫进去了。2. 获取全部评论数,直接通过 requests 获取不
- # -*- coding: GBK -*- from ctypes import * dll = windll.LoadLibrary(
- 在我们学习的过程中会遇到这么样的问题,就是在我们学习的过程中会发现需要分页处理,这里呢,给大家介绍书上说的分页。@app.route(
- 数据保存在csv文件中1.从csv文件中读取数据参数header=None的有无(1)没有header=None——直接将csv表中的第一行
- 前言摘要之前写了一篇 grpool goroutine池详解 | 协程管理 收到了大家积极的反馈,今天这篇来做一下grpool的性能测试分析
- 近日大家热议的盗版XP黑屏问题想必很多人都知道了,在这里就不多说。据媒体报道,微软公司将实施逐步投放策略,预计本周将投放5%黑屏,下周投放2
- 不到40天,ChatGPT的日活量已突破千万!而当年同样引起轰动的Instagram达到这一成就足足花了355天。这代表着我们正在广泛且快速
- 本文实例讲述了Yii2 assets清除缓存的方法。分享给大家供大家参考,具体如下:use vendor\myVendorName\myPa
- 导读:由于banner一般用于专题类网站,在门户网站的二级页面,用户进来之前,在首页已经对主题有一定的了解和认识,所以banner的作用是在
- 1.Word文档如下:2.代码# -*- coding: UTF-8 -*-from docx import Documentdef rea
- 例子:Response.Cookies("letwego")("visiter")="84
- 代理模式Proxy模式是一种常用的设计模式,它主要用来通过一个对象(比如B)给一个对象(比如A) 提供'代理'的方式方式访问
- 为什么要用numpy Python中提供了list容器,可以当作数组使用。但列表中的元素可以是任何对象,
- 正在看的ORACLE教程是:ORACLE常见错误代码的分析与解决三。 -----------------------------