在 Vue Router 中有条件地导入一个组件

Question

我想有条件地在 vue 路由器中导入一个组件。这是我目前所拥有的：

children: [
  {
    path: ':option',
    component: () => import('../components/Option1.vue'),
  },
],

根据什么:option是我想要导入一个不同的组件（Option1.vue，Option2.vue，等）。我知道我可以放几个，children但我实际上需要option在我的父组件中使用该变量（如果路由有选项，我会进行测试）。

怎么可能做到这一点？提前致谢 ：）

Answer 1

您可以创建一个包含动态组件的加载器组件，而不是进行条件路由。在加载器中，您将根据路由参数有条件地延迟加载选项组件。这不仅在路由时更容易，而且您也不必手动导入任何内容，并且只会导入使用的选项。

步骤 1.路由到选项加载器组件

路由器

{
  path: ':option',
  component: () => import('../components/OptionLoader.vue'),
}

步骤 2.在该选项加载器模板中，使用一个动态组件，该组件将由名为 的计算确定optionComponent：

OptionLoader.vue

<template>
  <component :is="optionComponent" />
</template>

步骤 3.创建一个延迟加载当前选项的计算

OptionLoader.vue

export default {
  computed: {
    optionComponent() {
      return () => import(`@/components/Option${this.$route.params.option}.vue`);
    }
  }
}

这将加载名为“Option5.vue”的组件，例如，当option路由参数为 时5。现在您有一个延迟加载的选项加载器，而不必手动导入每个选项。

编辑： OP 现在表示他正在使用 Vue 3。

视图 3

对于 Vue 3，将计算更改为使用defineAsyncComponent：

选项加​​载器.vue

import { defineAsyncComponent } from "vue";

computed: {
  optionComponent() {
    return defineAsyncComponent(() =>
      import(`@/components/Option${this.$route.params.option}.vue`)
    );
  }
}