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

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

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


vue.js vue-router dynamic-routing lazy-loading
person Nexus23    schedule 16.02.2018    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Вы можете использовать $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])
}

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

person thanksd    schedule 16.02.2018
comment
спасибо за Ваш ответ. Последний кусочек головоломки. Он работает, когда мы обычно перемещаемся на стороне клиента, но не работает при полной перезагрузке по дочернему пути. Полный реалод попал в 404. - person Nexus23; 17.02.2018
comment
Есть ли какое-либо решение для полной перезагрузки дочернего пути (f5) в декабре 2018 года. - person Sandeep sandy; 05.12.2018
comment
По-прежнему нет возможности сохранить эти данные через обновление страницы. Vue router действительно нуждается в этой функциональности, если он хочет конкурировать с подобными React Router. - person Evan Burbidge; 18.12.2018
comment
Маршрутизатор является реактивным, поэтому даже отсутствующий маршрут может работать после полной перезагрузки, если маршрут впоследствии будет добавлен на страницу. Это должно работать, если нет * маршрута с перенаправлением. См. codeandbox.io/s/vue-dynamic-components-owhwr. - person Alex Gyoshev; 01.10.2019