文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue路由器-捕获所有不起作用的通配符

问Vue路由器-捕获所有不起作用的通配符
EN

Stack Overflow用户

提问于 2020-08-22 00:17:50

回答 2查看 11.8K关注 0票数 18

我正在使用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)

我假设这是因为我没有在包含星号的路径前面加上'/'，但是如果我这样做了，那么catch all就不起作用了。以下是我的路线：

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

通配符路由是路由数组中的最后一个对象。有人知道我做错了什么吗？

vue-router

vuejs3

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-08-23 16:32:53

使用带有自定义正则表达式的参数捕获所有路由(/*) must now be defined：/:catchAll(.*)

例如：

    {
      // path: "*",
      path: "/:catchAll(.*)",
      name: "NotFound",
      component: PageNotFound,
      meta: {
        requiresAuth: false
      }
    }

票数 47

Stack Overflow用户

发布于 2020-10-15 02:36:11

就我个人而言，对于Vue 2的*(星形或全部捕获)路由，我在Vue 3中使用：

{
  path: '/:pathMatch(.*)*', <== THIS
  name: 'not-found',
  component: NotFound
}

捕获所有路由(*，/*)现在必须使用带有自定义regex:的参数来定义

参数名称可以是您想要的任何名称，如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(.*)*

The last *如果您计划使用其名称直接导航到未找到的路线，则必须执行此操作。

如果省略参数中的/字符，则解析或推送时将对其进行编码。

例如，如果您使用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

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63526486

复制

相似问题

问Vue路由器-捕获所有不起作用的通配符
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue路由器-捕获所有不起作用的通配符EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue路由器-捕获所有不起作用的通配符
EN