Динамически добавлять дочерние маршруты в Vuejs

Question

Согласно этому официальному примеру, у нас есть возможность добавлять вложенные / дочерние маршруты в vuejs. Но я не могу найти справку / документацию о способе динамического добавления этих дочерних маршрутов. например, добавлять дочерние маршруты только при посещении родительского маршрута.

В настоящее время все маршруты в приложении Vue определены в одном месте, где мы создаем экземпляр Router. Существует API под названием addRoutes, но я не знаю, как использовать его для добавления лениво загруженных функций приложения вдоль их маршрутов. Если кто-то знаком с системой модулей Angular2+, он может определять маршруты для функциональных модулей внутри этого модуля и даже загружать их лениво. Хотите знать, если что-то может быть достигнуто с VueJs?

Answer 1

Ты можешь использовать $router.addRoutes заново добавить маршрут, указав детей.

Вам нужно получить текущее определение маршрута (в отличие от $route объект) путем поиска $router.options.routes массив для объекта определения маршрута, который соответствует текущему $route.path, Затем добавьте children массив определений маршрутов к объекту и передать его $router.addRoutes,

created() {
  let { routes } = this.$router.options;
  let routeData = routes.find(r => r.path === this.$route.path);
  routeData.children = [
    { path: 'bar', component: Bar },
    { path: 'baz', component: Baz },      
  ];
  this.$router.addRoutes([routeData])
}

Вот пример скрипта динамического добавления дочерних маршрутов в creaked крючок определения компонента маршрута.