vue-router在vue2/3区别

这篇具有很好参考价值的文章主要介绍了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会报错。文章来源地址https://www.toymoban.com/news/detail-664149.html

到了这里,关于vue-router在vue2/3区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包