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会报错。

相关推荐
一斤代码4 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子5 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina5 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路6 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_6 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说6 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409196 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding6 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js