重新评估 vue-route 更改时的动态导入答案

【问题标题】：Re-evaluate dynamic import on vue-route change重新评估 vue-route 更改时的动态导入
【发布时间】：2019-06-25 11:24:40
【问题描述】：

我正在制作一个用于管理多个网站的管理面板。我的 vue-router 路由都以网站 slug 为前缀，并且我在路由器上有一个 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 时，不会重新评估该组件，并且会加载与前一个站点相同的组件。但是状态已经改变，所以这不是问题。

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

【问题讨论】：

标签： javascript vue.js vuex vue-router

【解决方案1】：

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/

【讨论】：

两种方法我都试过了，website_slug 已经设置为:key 的router-view。问题是返回组件的函数 (importOrDefault) 不会再次评估，这意味着始终使用相同的组件。
这可能有点 hacky 并且可能以不同的方式解决问题，但是您是否可以创建自己的“路由”组件，以便始终在路由上返回组件，然后在其中使用模板逻辑根据website_slug显示正确的组件？

【解决方案2】：

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

这样，另一个网站的同一个页面是一个唯一的路由，并且为每个网站评估组件。

【讨论】：