vue-router在vue2/3区别

构建选项区别

vue2-router

javascript 复制代码
 const router-new VueRouter({
      mode:history,
      base:_name,
    })

vue-next-router

javascript 复制代码
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

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

vue-next-router

javascript 复制代码
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会报错。

相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf12 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js