我想有条件地将组件导入vue路由器。这是我目前所拥有的：
children: [
{
path: ':option',
component: () => import('../components/Option1.vue'),
},
],
根据什么:option是我想要导入一个不同的组件（Option1.vue，Option2.vue，等）。我知道我可以放几个，children但实际上我需要option在父组件中使用变量（如果路由有选项，我会进行测试）。
怎么可能呢？提前致谢 ：）
您可以创建包含动态组件的加载程序组件，而不必执行条件路由。在加载程序中，您将根据路由参数有条件地延迟加载选项组件。这样不仅在路由时更容易，而且您也不必手动导入任何内容，并且仅会导入使用的选项。
步骤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`);
}
}
}
例如，当option路线参数为时，这将加载名为“ Option5.vue”的组件5。现在，您有一个延迟加载的选项加载器，而不必手动导入每个选项。
编辑： OP现在指示他正在使用Vue 3。
对于Vue 3，将计算值更改为使用defineAsyncComponent：
OptionsLoader.vue
import { defineAsyncComponent } from "vue";
computed: {
optionComponent() {
return defineAsyncComponent(() =>
import(`@/components/Option${this.$route.params.option}.vue`)
);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句