Vue Router - поймать все подстановочные знаки не работают

Я использую 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

Маршрут с подстановочными знаками - это последний объект в массиве маршрутов. Кто-нибудь знает, что я делаю не так?


vuejs3 vue-router
person user14131782    schedule 21.08.2020    source источник

Ответы (2)


arrow_upward
31
arrow_downward

Поймать все маршруты (/ *) Теперь необходимо определить с помощью параметра с настраиваемым регулярным выражением: /:catchAll(.*)

Например:

    {
      // path: "*",
      path: "/:catchAll(.*)",
      name: "NotFound",
      component: PageNotFound,
      meta: {
        requiresAuth: false
      }
    }
person Raj    schedule 23.08.2020
comment
Я пытаюсь использовать динамическое сопоставление маршрута, но когда я устанавливаю path: "/:user", перехожу к маршруту /user1234 и пытаюсь получить его в компоненте с помощью $route.params.user, это undefined. Когда я console.log($route), я получил params: { catchAll: "user1234" }. Как мне согласовать динамический маршрут? - person Andre Ravazzi; 10.09.2020
comment
Меня устраивает! Спасибо! - person LUISAO; 21.04.2021

arrow_upward
6
arrow_downward

Лично для маршрутов Vue 2 * (звездочка или поймать все) в Vue 3 я использую:

{
  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'

Прочтите документы: От перехода с vue 2 на vue 3 и Поймать всех / Маршрут 404 не найден

person roli roli    schedule 14.10.2020