Question

我正在制作一个用于管理多个网站的管理面板。我的vue-router路由都以网站slug开头，我在路由器上有一个beforeEach，因此将{ "isTRCAvailable": false, "trcApplicableFrom": "2019-06-19T15:30:33.956Z", "trcApplicableTo": "2019-06-19T15:30:33.956Z", "trcFile": null, "isTenFAvailable": false, "tenFApplicableFrom": "2019-06-19T15:30:33.956Z", "tenFApplicableTo": "2019-06-19T15:30:33.956Z", "tenFFile": null, "weatherPEInIndia": false, "wpeApplicableFrom": "2019-06-19T15:30:33.956Z", "wpeApplicableTo": "2019-06-19T15:30:33.956Z", "wpeFile": null, "noPEDocumentAvaliable": false, "noPEFile": null, }设置为vuex状态。

每个站点都将使用大多数相同的组件，但是也会有几个站点具有自定义页面组件。

在这种情况下，我制作了一个名为website_slug的函数，如下所示：

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) }时，不会重新评估该组件，并且将加载与先前站点相同的组件。但是状态已经改变，所以这不是问题。

有没有一种方法可以使路由器组件重新评估该功能，或者我缺少一些可以用于此目的的明显功能？

Answer 1

Vue Router尝试尽可能多地重用组件。您是否尝试过将beforeRouteUpdate添加到组件中以显式设置数据（与使用mount或其他方法相比）？您还可以将组件的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/

Answer 2

我尝试了几种解决方案，但是无法重新评估路线组件。最终，我在引导Vue之前加载了可用的网站，并为所有网站生成了所有可能的路由。

这样，另一个网站的同一页面是一条唯一的路线，并且每个网站都会评估该组件。

重新评估vue-route更改中的动态导入

2 个答案: