vue-router中基于路由参数的动态组件

Question

在 Vue 中是否可以根据路由参数的值动态使用组件？

这是我正在尝试做的一个例子：

path: '/model/:modelName',
components: {
  default: ModelDefinition.models.find((model) => model.key === $route.params.modelName),
},

问题是： $route在这里不可用。 modelName也不是。

如果default也可以是一个函数（类似于props ），那可能会很好：

path: '/model/:modelName',
components: {
  default: (modelName) => (ModelDefinition.models.find((model) => model.key === $route.params.modelName)),
},

令我惊讶的是，这个函数实际上被调用了，但参数似乎是某种函数，当然不是我希望的模型名称。

我需要这个的原因是：这条路线实际上有更多的配置，为各种事情指定了很多组件和值。 如果我必须为每个模型指定它，它将是冗长且重复的，并且必须针对我们添加到系统中的每个模型进行扩展。

Answer 1

我不确定您是否必须使用vue-router “做魔术” - 为什么不直接处理组件内部的参数（或创建一个容器组件，并在那里处理参数）？

下面的代码片段显示您可以使用外部数据来控制应显示的组件。 如果您向下传递模型参数，则可以显示任何现有（和注册）组件名称。

 const CompA = { template: `<div class="border-blue">COMP-A</div>` } const CompB = { template: `<div class="border-red">COMP-B</div>` } new Vue({ el: "#app", components: { CompA, CompB }, data: { selected: '' } })

 [class^="border-"] { padding: 10px; } .border-blue { border: 1px solid blue; } .border-red { border: 1px solid red; }

 <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <div id="app"> <select v-model="selected"> <option disabled value="">Please select one</option> <option>CompA</option> <option>CompB</option> </select> <br /> <span>Selected: {{ selected }}</span> <br /> <br /> Here's a variable component - based on external data: <component :is="selected"></component> </div>

Answer 2

在components声明中， this是不可用的，因此您无法访问道具和其他实例数据。

您可以做的是创建一个返回组件的计算属性。 像这样：

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

<script>
export default {
  props: {
    componentName: String,
  },
  computed: {
    componentInstance() {
      return () => import(`./modules/${this.componentName}/template.vue`);
    },
  },
};
</script>