时间戳

首页 > 解决方案 > vue-router中基于路由参数的动态组件

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

问题描述

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)),
},

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

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

标签： vue.jsvue-router

解决方案

我不确定你必须用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>

推荐阅读