vue-route 변경 시 동적 가져오기 재평가

vue-route 변경 시 동적 가져오기 재평가

여러 웹 사이트를 관리하는 관리 패널을 만들고 있습니다.vue-router 루트에는 모두 Web 사이트 slug가 프리픽스 되어 있으며 라우터 상에 각각1개의 before가 설정되어 있습니다.website_slugvuex 상태가 됩니다.

각 사이트에서는 대부분의 동일한 컴포넌트를 사용하지만 커스텀페이지 컴포넌트를 가진 사이트도 여러 개 있습니다.

이 경우, 저는 다음과 같은 함수를 만들었습니다.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컴포넌트는 재검출되지 않고 이전 사이트와 동일한 컴포넌트가 로드됩니다.상태가 바뀌었기 때문에, 이것은 문제가 아닙니다.

라우터 컴포넌트의 기능을 재평가할 수 있는 방법이 있습니까?아니면 이 기능에 사용할 수 있는 명백한 기능이 부족한 것입니까?

Vue Router는 가능한 한 컴포넌트를 재사용하려고 합니다.추가해 보셨습니까?beforeRouteUpdate(마운트 또는 다른 것을 사용하는 경우와 비교하여) 데이터를 명시적으로 설정하도록 컴포넌트에 할당해야 합니까?또, 다음과 같이 설정할 수도 있습니다.key명시적인 무언가에 대한 구성요소의 특성(예를 들어)website_slugvalue)를 사용하여 컴포넌트를 재사용하지 않도록 합니다.

저는 개인적으로 이 제품을 사용하는 것을 선호합니다.key할 수 있을 때.

참조: https://github.com/vuejs/vue-router/issues/1490

beforeRouteUpdate방법: https://jsfiddle.net/Linusborg/L7hscd8h/2208/

key방법: https://jsfiddle.net/Linusborg/L7hscd8h/1528/

몇 가지 솔루션을 시도했지만 루트 구성요소를 재평가할 수 없었습니다.결국 Vue를 부트스트랩하기 전에 사용 가능한 웹 사이트를 로드하여 모든 웹 사이트에 대해 가능한 모든 경로를 생성했습니다.

이와 같이, 다른 Web 사이트의 같은 페이지가 일의의 루트가 되어, 각 Web 사이트에 대해서 컴포넌트가 평가됩니다.

언급URL : https://stackoverflow.com/questions/56752982/re-evaluate-dynamic-import-on-vue-route-change