当前位置: 首页 > news >正文

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.lryc.cn/news/134199.html

相关文章:

  • Apache Doris 入门教程33:统计信息
  • 有效需求的特征
  • 基于51单片机无线温度报警控制器 NRF24L01 多路温度报警系统设计
  • Spring Data JPA的@Entity注解
  • CANoe panel中,Path Dialog如何保存选择的文件路径
  • 关于es中索引,倒排索引的理解
  • k8s service (二)
  • 桌面软件开发框架 Electron、Qt、WPF 和 WinForms 怎么选?
  • SSM框架的学习与应用(Spring + Spring MVC + MyBatis)-Java EE企业级应用开发学习记录(第二天)Mybatis的深入学习
  • 学习笔记:Opencv实现限制对比度得自适应直方图均衡CLAHE
  • R语言处理缺失数据(1)-mice
  • SpringBoot自动配置原理
  • HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 五)
  • Java基础篇——反射枚举
  • 每日一学——案例难点Windows配置
  • 2023.8 - java - 运算符
  • 推荐三款Scrum敏捷项目管理工具/敏捷管理实践
  • WARNING: undefined behavior - version of Delve is too old for Go version
  • https非对称加密算法
  • “深入探索JVM:Java虚拟机背后的奥秘“
  • 树莓派系统入门教程(三)—— 使用Windows上的VSCode远程连接树莓派进行Python开发
  • 如何使用HTML5新增的标签来优化SEO?
  • LVS之keepalived
  • Linux(入门篇)
  • 如何构造不包含字母和数字的webshell
  • springboot(JavaCV )实现视频截取第N帧并保存图片
  • Linux面试笔试题(5)
  • WordPress文章:创建和优化您的网站内容
  • Selenium webdriver_manager根据浏览器版本自动下载对应驱动程序
  • 2023 - java - 强制类型转换和装箱