vue3 vue-router4 路由报错,vue3和vue 2的路由区别

232 阅读1分钟

"vue-router": "^4.0.14"

vue-router.esm-bundler.js:3302 Error: Catch all routes ("*") must now be defined using a param with a custom regexp.

截屏2022-04-22下午2.35.46.png

vue3对404配置进行了修改,必须要用 正则匹配

截屏2022-04-22下午2.22.35.png

改成

截屏2022-04-22下午2.23.01.png


动态路由

这其实就是所谓的带参数动态路由匹配,给定匹配模式的路由映射到同一个组件,在路径中使用一个动态字段来实现,称之为 路径参数

例如:

path: '/users/:id'

/users/101 和 /users/102 这样的路径都会映射到同一个路由

捕获所有路由或 404 Not found 路由

常规参数只匹配 url 片段之间的字符,用 / 分隔。如果我们想匹配任意路径,我们可以使用自定义的 路径参数 正则表达式,在 路径参数 后面的括号中加入 正则表达式 :

截屏2022-04-22下午2.33.03.png