Динамическое маршрутизирование

Добавление маршрутов в ваш маршрутизатор обычно выполняется с помощью routes опции, но в некоторых ситуациях вы можете добавлять или удалять маршруты во время работы приложения. Приложения с расширяемыми интерфейсами, такими как Vue CLI UI, могут использовать это для расширения приложения.

Добавление маршрутов

Динамическое маршрутизирование достигается в основном с помощью двух функций: router.addRoute() и router.removeRoute(). Они только регистрируют новый маршрут, что означает, что если добавленный маршрут соответствует текущему расположению, вам потребуется ручное перенаправление с помощью router.push() или router.replace() для отображения этого нового маршрута. Давайте рассмотрим пример:

Представьте, что у вас есть следующий маршрутизатор с одним единственным маршрутом:

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/:articleName', component: Article }],
})

Переход на любую страницу, /about, /store, или /3-tricks-to-improve-your-routing-code приводит к отображению компонента Article. Если мы находимся на /about и добавляем новый маршрут:

router.addRoute({ path: '/about', component: About })

Страница по-прежнему будет отображать компонент Article, нам нужно вручную вызвать router.replace() для изменения текущего расположения и перезаписи предыдущего места (вместо добавления новой записи, что приведет к двойному расположению в истории):

router.addRoute({ path: '/about', component: About })
// we could also use this.$route or route = useRoute() (inside a setup)
router.replace(router.currentRoute.value.fullPath)

Помните, что вы можете await router.replace(), если вам нужно подождать, пока новый маршрут будет отображен.

Добавление маршрутов внутри страниц навигации

Если вы решите добавить или удалить маршруты внутри страницы навигации, не следует вызывать router.replace(), а вызвать перенаправление, вернув новое расположение:

router.beforeEach(to => {
  if (!hasNecessaryRoute(to)) {
    router.addRoute(generateRoute(to))
    // trigger a redirection
    return to.fullPath
  }
})

Приведённый выше пример предполагает два момента: во-первых, запись нового маршрута будет соответствовать расположению to, что фактически приведёт к другому расположению, чем то, которое мы пытались получить. Во-вторых, hasNecessaryRoute() возвращает false после добавления нового маршрута, чтобы избежать бесконечного перенаправления.

Так как мы перенаправляем, мы замещаем текущее навигационное действие, фактически ведя себя как в приведённом выше примере. В реальных сценариях добавление маршрутов чаще всего происходит вне страниц навигации, например, когда компонент представления монтируется, он регистрирует новые маршруты.

Удаление маршрутов

Существует несколько способов удаления существующих маршрутов:

• Добавив маршрут с конфликтующим именем. Если вы добавите маршрут с тем же именем, что и существующий, он сначала удалит существующий маршрут, а затем добавит новый:

  router.addRoute({ path: '/about', name: 'about', component: About })
  // this will remove the previously added route because they have the same name and names are unique
  router.addRoute({ path: '/other', name: 'about', component: Other })
  

• Вызвав обратный вызов, возвращаемый router.addRoute():

  const removeRoute = router.addRoute(routeRecord)
  removeRoute() // removes the route if it exists
  

  Это полезно, когда маршруты не имеют имени
• Используя router.removeRoute() для удаления маршрута по его имени:

  router.addRoute({ path: '/about', name: 'about', component: About })
  // remove the route
  router.removeRoute('about')
  

  Обратите внимание, что вы можете использовать Symbol для имён маршрутов, если хотите использовать эту функцию, но хотите избежать конфликтов имён.

При удалении маршрута все его псевдонимы и дочерние маршруты также удаляются вместе с ним.

Добавление вложенных маршрутов

Чтобы добавить вложенные маршруты к существующему маршруту, вы можете передать имя маршрута в качестве первого параметра функции router.addRoute(), это добавит маршрут так, как если бы он был добавлен через children:

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

Это эквивалентно:

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

Просмотр существующих маршрутов

Vue Router предоставляет две функции для просмотра существующих маршрутов:

• router.hasRoute(): проверка существования маршрута
• router.getRoutes(): получение массива со всеми записями маршрутов.