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

Vue - вложенный дочерний маршрут вызывает перезагрузку родительского маршрута

0 голосов
/ 21 января 2020

Я использую vue и имею проблемы с вложенными дочерними элементами - это вызывает перезагрузку данных родительским компонентом. Вот пример моего вложенного дочернего маршрута: 

{
  path: '/products',
  name: 'products',
  component: MainLayout,
  redirect: {name: 'product-edit'},
  children: [
    {
      path: '/products/edit/:id',
      name: 'product-edit',
      component: ComponentProduct,
      redirect: {name: 'product-summary'},
      children: [
        {
          path: 'summary',
          name: 'product-summary',
          component: ComponentSummary
        },
        {
          path: 'description',
          name: 'product-description',
          component: ComponentDescription
        },
        {
          path: 'elements',
          name: 'product-elements',
          component: ComponentElements,
          children: [
            {
              path: ':element',
              name: 'product-elements-id',
              component: ComponentElementsId,
            }
          ]
        }
      ]
    }
  ]
}

MainLayout

Для отображения страницы реального элемента используется только <router-view :key="$route.params.id"></router-view>. Я использую такую ​​конструкцию, чтобы избежать проблем с перезагрузкой после первоначального сохранения. Пример: / products / edit / 0 -> пользователь сохраняет, получает ответ и автоматически перенаправляется на / products / edit / 12 (12 - новый идентификатор из API). Без этого ключа он не будет работать правильно, потому что vue кэширует страницу со старыми данными.

ComponentProduct

«Контейнер» для подстраниц. Этот компонент загружает данные продукта (используя id из params) pu sh в vuex et c. Он также включает <router-view>, но с <keep-alive>, чтобы избежать перезагрузки уже используемых вкладок.

Сводка и описание - это простые подстраницы с некоторыми данными.

ComponentElements

Это специальная подстраница, которая загружает дополнительные данные (элементы ) для продукта и перечислить их. Он также использует vuex для получения данных. Затем пользователь может щелкнуть элемент списка go для описания в ComponentElementsId

Но ... это не имеет значения. На Сводке или Описании он работает нормально, но если я захожу в ComponentElements, это вызывает перезагрузку данных родителем: страница загружается не полностью, маршрут работает нормально, но почему родитель также обновляется? Я не трогаю id, поэтому это странно для меня.

...