Пересмотреть динамический импорт при изменении маршрута - PullRequest
Новая
       8

Пересмотреть динамический импорт при изменении маршрута

2 голосов
/ 25 июня 2019

Я делаю админ-панель, которая используется для управления несколькими сайтами.Все мои маршруты vue-router имеют префикс с веб-сайтом, и у меня есть beforeEach на маршрутизаторе, который соответственно устанавливает website_slug в состояние vuex.

Каждый сайт будет использовать большинство одинаковых компонентов, нотакже будет несколько сайтов, которые имеют пользовательские компоненты страниц.

Для этого случая я создал функцию с именем importOrDefault, например: 

const importOrDefault = (componentName, store) => {
    return import(/* webpackChunkName: "[request]" */ `./Pages/${store.getters.website.slug}/${componentName}`)
        .catch(() => import(/* webpackChunkName: "[request]" */ `./Pages/_shared/${componentName}`));
};

, которую я использую в конфигурации маршрутизатора следующим образом.: 

{
    path: '/:website_slug/',
    name: 'dashboard',
    component: () => importOrDefault('Dashboard', store)
}

Эта установка прекрасно работает при нагрузке.Однако при переходе к другому :website_slug компонент не переоценивается, и загружается тот же компонент, что и на предыдущем сайте.Однако состояние изменилось, поэтому проблема не в этом.

Есть ли способ заставить компонент маршрутизатора переоценить функцию или мне не хватает какой-то очевидной функциональности, которую я могу использовать для этого?

Ответы [ 2 ]

1 голос
/ 25 июня 2019

Vue Router старается использовать компоненты как можно чаще. Вы пытались добавить beforeRouteUpdate к своему компоненту, чтобы явно установить данные (против использования смонтированного или что-то еще)? Вы также можете установить для свойства key компонента что-то явное (например, значение website_slug), чтобы компонент не использовался повторно.

Лично я предпочитаю использовать key, когда могу.

См .: https://github.com/vuejs/vue-router/issues/1490

beforeRouteUpdate метод: https://jsfiddle.net/Linusborg/L7hscd8h/2208/

key метод: https://jsfiddle.net/Linusborg/L7hscd8h/1528/

0 голосов
/ 25 июня 2019

Я испробовал несколько решений, но не смог переоценить компонент маршрута.В конце концов, я загрузил доступные сайты перед загрузкой Vue и сгенерировал все возможные маршруты для всех сайтов.

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

...