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>