Vue路由器 - 捕获所有通配符不起作用
Posted
技术标签:
【中文标题】Vue路由器 - 捕获所有通配符不起作用【英文标题】:Vue Router - catch all wildcard not working 【发布时间】:2020-12-11 01:18:06 【问题描述】:我将 Vue Router 与 Vue 3 一起使用,并尝试添加一条包罗万象的路由以在用户尝试访问无效 URL 时重定向用户。当我尝试使用通配符 (*) 时,控制台中记录了以下错误:
Uncaught Error: A non-empty path must start with "/"
at tokenizePath (vue-router.esm.js?8c4f:975)
at createRouteRecordMatcher (vue-router.esm.js?8c4f:1106)
at addRoute (vue-router.esm.js?8c4f:1190)
at eval (vue-router.esm.js?8c4f:1335)
at Array.forEach (<anonymous>)
at createRouterMatcher (vue-router.esm.js?8c4f:1335)
at createRouter (vue-router.esm.js?8c4f:2064)
at eval (index.js?a18c:26)
at Module../src/router/index.js (app.js:1402)
at __webpack_require__ (app.js:854)
我假设这是因为我没有在包含星号的路径前加上“/”,但如果我这样做,那么全部捕获将不起作用。这是我的路线:
imports...
const routes = [
path: '/',
name: 'Home',
component: Home
,
path: '/user',
name: 'User',
// route level code-splitting
// this generates a separate chunk (user.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "user" */ '../views/user/User.vue'),
children: [path: '', component: UserStart, path: ':id', component: UserDetail, path: ':id/edit', component: UserEdit, name: 'userEdit']
,
path: '/redirect-me', redirect: '/user',
path: '*', redirect: '/'
]
const router = createRouter(
history: createWebHashHistory(),
routes
)
export default router
通配符路由是路由数组中的最后一个对象。有谁知道我做错了什么?
【问题讨论】:
【参考方案1】:使用带有自定义正则表达式的参数捕获所有路由 (/*) must now be defined:/:catchAll(.*)
例如:
// path: "*",
path: "/:catchAll(.*)",
name: "NotFound",
component: PageNotFound,
meta:
requiresAuth: false
【讨论】:
我正在尝试使用动态路由匹配,但是当我设置path: "/:user"
时,转到路由/user1234
并尝试在带有$route.params.user
的组件中获取它,它是undefined
。当我console.log($route)
时,我得到了params: catchAll: "user1234"
。我应该如何使动态路由匹配?【参考方案2】:
就个人而言,对于 Vue 3 中 Vue 2 的 *(星号或全部)路线,我使用:
path: '/:pathMatch(.*)*', <== THIS
name: 'not-found',
component: NotFound
现在必须使用带有自定义正则表达式的参数来定义捕获所有路由(*、/*):
参数名称可以是任何你想要的,比如catchAll, pathMatch, noPage
等等
path: '/:pathMatch(.*)*', //will match everything and put it under `$route.params.pathMatch`
name: 'not-found',
component: NotFound
path: '/user-:afterUser(.*)',// will match anything starting with `/user-` and put it under `$route.params.afterUser`
component: UserGeneric
/:pathMatch(.*)*
最后一个*
如果您打算使用其名称直接导航到未找到的路线,则它是必需的。
如果参数中省略/
字符,解析或推送时会被编码。
例如,如果您使用path: /:pathMatch(.*)
(注意:没有最后一个星号)并转到/user/not-found
(一个不存在的页面),this.$route.params.pathMatch
将是一个字符串 => 'user/not-found'
// bad example if using named routes:
router.resolve(
name: 'bad-not-found',
params: pathMatch: 'not/found' ,
).href // '/not%2Ffound'
相反,如果您使用 path: /:pathMatch(.*)*
(注意:带星号)this.$route.params.pathMatch
将是一个数组 ['user', 'not-found']
// good example:
router.resolve(
name: 'not-found',
params: pathMatch: ['not', 'found'] ,
).href // '/not/found'
请阅读文档:From migration from vue 2 to vue 3 和 Catch all / 404 Not found Route
【讨论】:
以上是关于Vue路由器 - 捕获所有通配符不起作用的主要内容,如果未能解决你的问题,请参考以下文章