在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

Vue 3

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

OptionsLoader.vue

import { defineAsyncComponent } from "vue";

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

Answer 2

下面是一些在VueJS3中工作的东西:

<template>
<component :is="userComponent"/>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import { useRoute, useRouter } from 'vue-router';
export default {
computed: {
userComponent() {
const route = useRoute();
const router = useRouter();
const components = {
first: 'Option1',
second: 'Option2',
third: 'OtherOption',
fourth: 'DefaultOption',
};
if (components[route.params.option]) {
return defineAsyncComponent(() => import(`./options/${components[route.params.option]}.vue`));
}
router.push({ path: `/rubrique/${route.params.parent}`, replace: true });
return false;
},
},
};
</script>

来源:https://v3-migration.vuejs.org/breaking-changes/async-components.html对于带有"的行，可能会得到像这样的错误信息。return":Syntax Error: TypeError: Cannot read property 'range' of null

在这种情况下，这意味着您可能希望从babel-eslint迁移到@babel/eslint-parser(来源:https://babeljs.io/blog/2020/07/13/the-state-of-babel-eslint#the-present)