Vue.js vue路由器中基于路由参数的动态组件

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

下面是我尝试做的一个例子：

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

问题是：

$route

在此处不可用。两者都不是

modelName

如果

默认值

也可以是一个函数（类似于

道具

），那该怎么办呢

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

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

我不确定您是否必须使用vue路由器“施展魔法”-为什么不直接处理组件内部的参数（或创建容器组件，并在其中处理参数）

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

const CompA={
模板：`COMP-A`
}
常数CompB={
模板：`COMP-B`
}
新Vue({
el:“应用程序”，
组成部分：{
康帕，
康普
},
数据：{
已选择：“”
}
})

[class^=“border-”]{
填充：10px；
}
.蓝色边框{
边框：1px纯蓝色；
}
.红色边框{
边框：1px纯红；
}

请选择一个
公司
康普


已选定：{{Selected}



这是一个基于外部数据的可变组件：

在

组件

声明中，

此

不可用，因此您无法访问道具和其他实例数据

您可以创建一个返回组件的计算属性。如下所示：

导出默认值{
道具：{
组件名称：字符串，
},
计算：{
组件状态（）{
return（）=>import（`./modules/${this.componentName}/template.vue`）；
},
},
};

使用导航卫士（或全局导航卫士）进行路由重定向如何？这似乎更多的是用于重定向到其他路径，如登录，而不是用于决定哪个组件需要在何处呈现。或者您有这样使用的示例吗？好的，在某种程度上，它可能是后一个，因为事实是。因此传递“目标"在

下一个
回调中进行路由可能会对您的情况有所帮助。本例不使用路由器，但使用仅解释路由参数然后加载正确组件的包装器组件可能会起作用，是的。唯一的缺点是，我将在所有地方都使用这些容器组件。我希望把它放在一个地方：路由器。但这会起作用的。谢谢。也许你可以把这个“容器”创建成一个混合体，然后在全球范围内导入它——这可能是一个不明智的方法，但在技术上是可能的（这只是一个自发的想法，还没有经过测试或思考）
path: '/model/:modelName',
components: {
  default: (modelName) => (ModelDefinition.models.find((model) => model.key === $route.params.modelName)),
},