vue-router在vue2/3区别

构建选项区别

vue2-router

 const router-new VueRouter({mode:history,base:_name,})

vue-next-router

import { createRouter,createWebHistory} from vue-next-router
const router=createRouter({history:createHistory(/)
})

在上述代码中我们发现,vue2中的构建选项mode和base,分别为mode和base,而在vue-next-router中变成了,history和history中的第一个参数/.

捕获路由加正则表达式/:catchAll(.*)

vue2-router

 const router=new VueRouter({mode:history,routes:[{path:/user/:a*}]
})

vue-next-router

const router=createRouter({history:createWebHistrory(),routes:[{path:/user/:a:catchAll(.*).component:component}]
})

当路由为 /user/a/b 时,捕获到的 params 为 {“a”: “a”, “catchAll”: “/b”}。

match改变(vue2/3)

match详解点击这里
router.match和router.resolve在vue3中已经被合并,只是签名略有不同。

删除router.getMatchedComponents,可以从router.currentRoute.value.matched 中获取。

router.getMatchedComponents 返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类,不是实例)。通常在服务端渲染的数据预加载时使用。

push 或者 resolve 一个不存在的命名路由时,将会引发错误,而不是导航到根路由 “/” 并且不显示任何内容。

在vue2中会自动跳转到跟路由/中,而vue3会报错。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/47038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python机器学习】实验15 将Lenet5应用于Cifar10数据集(PyTorch实现)

文章目录 CIFAR10数据集介绍1. 数据的下载2.修改模型与前面的参数设置保持一致3. 新建模型4. 从数据集中分批量读取数据5. 定义损失函数6. 定义优化器7. 开始训练8.测试模型 9. 手写体图片的可视化10. 多幅图片的可视化 思考题11. 读取测试集的图片预测值(神经网络的…

k8s集群证书过期后,如何更新k8s证书

对于版本 1.21.5,这是我的解决方案: 步骤1: ssh 到主节点,然后在步骤 2 中检查证书。 步骤2: 运行这个命令:kubeadm certs check-expiration rootkube-master-1:~# kubeadm certs check-expiration [c…

qt中窗口的布局

qt中窗口的布局 常用的窗口布局方式使用拖拽控件的方式调用窗口布局使用Widget控件完成窗口布局布局中嵌套布局demo(制作登录页面) 如果不使用窗口布局,会带来的后果: 控件可能显示不出来不能按照期望的大小显示不能跟随窗口进行…

如何最简单、通俗地理解什么是机器学习?

那就究竟什么是学习呢?诺贝尔经济学奖和图灵奖双料得主、卡耐基梅隆大学的赫伯特 西蒙 (Herbert Simon) 教授是这样定义的:“学习是系统通过经验提升性能的过程”。可以看到,学习是一个过程,并且这里有3个关键词,即经验、提升和…

CSS中如何实现文字溢出省略号(text-overflow: ellipsis)效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中如何实现文字溢出省略号(text-overflow: ellipsis)效果?⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 …

【云原生,k8s】Helm应用包管理器介绍

目录 一、为什么需要Helm? (一)Helm介绍 (二)Helm有3个重要概念: (三)Helm特点 二、Helm V3变化 (一)架构变化 (二)自动创建名…

第7章 高性能门户首页构建

mini商城第7章 高性能门户首页构建 一、课题 高性能门户建设 二、回顾 1、了解文件存储系统的概念 2、了解常用文件服务器的区别 3、掌握Minio的应用 三、目标 1、OpenResty 百万并发站点架构 OpenResty 特性介绍 搭建OpenResty Web站点动静分离方案剖析 2、多级缓存架…

STM32L151C8T6 芯片数据手册

1. 芯片型号含义 2. Flash: 64KB 3. keil 配置ST-Link 烧录程序 4. keil 选择Flash 烧录算法 5. 系统主频 32Mhz 6. 时钟树 clock tree

嵌入式系统常用的开发板

今天,了解一下常用的开发板,像stm32是最近了解的,esp8266系列是之前大三下上物联网导论课程时候接触的,一些树莓派,Arduino听说过,但了解不多。

ElasticSearch 7.4学习记录(DSL语法)

上文和大家一起初次了解了很多ES相关的基础知识,本文的内容将会是实际企业中所需要的吗,也是我们需要熟练应用的内容。 面对ES,我们最多使用的就是查询,当我负责这个业务时,现不需要我去考虑如何创建索引,添…

自然语言处理从入门到应用——LangChain:索引(Indexes)-[向量存储器(Vectorstores)]

分类目录:《自然语言处理从入门到应用》总目录 Vectorstores是构建索引的最重要组件之一。本文展示了与VectorStores相关的基本功能。在使用VectorStores时,创建要放入其中的向量是一个关键部分,通常通过嵌入来创建。 from langchain.embedd…

Go:测试框架GoConvey 简介

快速开始 GoConvey是一个完全兼容官方Go Test的测试框架,一般来说这种第三方库都比官方的功能要强大、更加易于使用、开发效率更高,闲话少说,先看一个example: package utils import (. "github.com/smartystreets/goconvey…

Java设计模式 (三) 代理设计模式

什么是代理设计模式? 代理设计模式是一种结构型设计模式,它允许创建一个代理对象,用于控制对其他对象的访问。代理模式通常用于在访问对象时添加一些附加操作,而不是直接访问真实对象。代理模式可以在不改变原始类代码的情况下,通…

【Redis】Redis哨兵模式

【Redis】Redis哨兵模式 Redis主从模式当主服务器宕机后,需要手动把一台从服务器切换为主服务器,需要人工干预费事费力,为了解决这个问题出现了哨兵模式。 哨兵模式是是一个管理多个 Redis 实例的工具,它可以实现对 Redis 的监控…

NC65 树表型参照 搜索全部 按钮点击事件后获取sql的方法

NC65 树表型参照 搜索全部 按钮点击事件后获取sql的方法。 /*** 返回 UIbtnLocQuery 特性值。* * return nc.ui.pub.beans.UIButton*/ /* 警告:此方法将重新生成。 */ private nc.ui.pub.beans.UIButton getUIbtnLocQuery() {// 搜索全部 按钮return getButtonPan…

探究HTTP API接口测试:工具、方法与自动化

本文将深入探讨HTTP API接口测试的重要性,并介绍了相关工具、方法以及自动化测试的实施,同时比较了HTTP和API接口测试的区别。从不同角度解析这一关键测试领域,帮助读者更好地理解和应用于实际项目中。 在如今数字化的世界中,软件…

代码随想录训练营day15|102.层序遍历 226.翻转二叉树 101.对称二叉树

TOC 前言 代码随想录算法训练营day15 一、Leetcode 102.层序遍历 1.题目 给你二叉树的根节点 root ,返回其节点值的 层序遍历 。 (即逐层地,从左到右访问所有节点)。 示例 1: 输入:root [3,9,20,null,null,15,7] 输出&#xff1a…

自然语言处理从入门到应用——LangChain:链(Chains)-[通用功能:LLMChain、RouterChain和SequentialChain]

分类目录:《自然语言处理从入门到应用》总目录 LLMChain LLMChain是查询LLM对象最流行的方式之一。它使用提供的输入键值(如果有的话,还包括内存键值)格式化提示模板,将格式化的字符串传递给LLM,并返回LLM…

【JavaEE】面向切面编程AOP是什么-Spring AOP框架的基本使用

【JavaEE】Spring AOP(1) 文章目录 【JavaEE】Spring AOP(1)1. Spring AOP 是什么1.1 AOP 与 Spring AOP1.2 没有AOP的世界是怎样的1.3 AOP是什么 2. Spring AOP 框架的学习2.1 AOP的组成2.1.1 Aspect 切面2.1.2 Pointcut 切点2.1…

【算法日志】贪心算法刷题:单调递增数列,贪心算法总结(day32)

代码随想录刷题60Day 目录 前言 单调递增数列 贪心算法总结 前言 今天是贪心算法刷题的最后一天,今天本来是打算刷两道题,其中的一道hard题做了好久都没有做出来(主要思路错了)。然后再总结一下。 单调递增数列 int monotoneIncreasingDigits(int n…