Vue маршрутизатор, созданный по результатам API и повторного использования компонентов - PullRequest
Новая
       4

Vue маршрутизатор, созданный по результатам API и повторного использования компонентов

0 голосов
/ 14 марта 2020

Я извлекаю массив из API и добавляю к нему компоненты в зависимости от типа. Из этого я создам маршруты для Vue позже. Пример массива после добавления компонентов и потомков к нему: 

[
 {
  id: 1,
  uri: '/',
  title: 'title',
  component: require('../components/views/type1.vue).default,
  children: []
 },
 {
  id: 2,
  uri: '/page',
  title: 'title2',
  component: require('../components/views/type2.vue).default,
  children: [{id: 3, uri: 'subpage', title: 'title3', component: require('../components/views/type1.vue).default}]
 },
 {
  id: 4,
  uri: '/other-page',
  title: 'title4',
  component: require('../components/views/type2.vue).default,
  children: [{id: 5, uri: 'other-sub-page', title: 'title5', component: require('../components/views/type1.vue).default}]
 },
]

Из этого я создаю Vue маршрутов в для l oop: 

//for-loop
routes.push({
    path: entries[i].uri,
    name:entries[i].title,
    component: entries[i].component,
    children: entries[i].children,
    meta:{
        entryId:entries[i].id
    }
});

const router = new VueRouter({
    mode:'history',
    routes
});

После этого и создания экземпляра Vue все различные маршруты с его дочерними маршрутами работают, но у меня есть некоторые проблемы:

  • Случайным образом дочерний маршрут загружает неправильный файл. vue (хотя путь к компоненту в массиве указан правильно, так как он отлажен)
  • Это происходит только с дочерними маршрутами.
  • При загрузке неправильного компонента - он также печатает то же содержимое, что и другой компонент того же типа. Как будто они идентичны. Например, маршрут с идентификатором 3 (дочерний) печатает точно такой же результат, как и идентификатор 1. Даже если содержимое должно отличаться, даже если они одного типа.

Я предполагаю, что оно имеет что-то связанное с тем, как я строю маршруты Vue, но я не могу понять, почему это не сработает. Массив «маршрутов» выглядит отлично при отладке перед передачей его на Vue маршрутизатор.

РЕДАКТИРОВАНИЕ / ТЕМП. РЕШЕНИЕ

Проблема решена используя полный URI и просто создавая плоский массив маршрутизаторов без детей. Это что-то с детьми, что вызывает это. Так что теперь он работает только с простым массивом маршрутов, но я не знаю, вызовет ли это какие-либо проблемы / лучшие практики и т.д. c.

...