[英]Dynamic components based on route params in vue-router
Is it possible in Vue to dynamically use components based on the value of a route parameter?在 Vue 中是否可以根据路由参数的值动态使用组件?
Here's an example of what I'm trying to do:这是我正在尝试做的一个例子:
path: '/model/:modelName',
components: {
default: ModelDefinition.models.find((model) => model.key === $route.params.modelName),
},
The problem is: $route
is not available here.问题是:
$route
在这里不可用。 Neither is modelName
. modelName
也不是。
What might be nice if default
could also be a function (similar to props
):如果
default
也可以是一个函数(类似于props
),那可能会很好:
path: '/model/:modelName',
components: {
default: (modelName) => (ModelDefinition.models.find((model) => model.key === $route.params.modelName)),
},
This function actually gets called to my surprise, but the argument seems to be some sort of function, and certainly not the modelName I'm hoping for.令我惊讶的是,这个函数实际上被调用了,但参数似乎是某种函数,当然不是我希望的模型名称。
The reason I need this is: there's actually a lot more configuration for this route, specifying lots of components and values for various things.我需要这个的原因是:这条路线实际上有更多的配置,为各种事情指定了很多组件和值。 If I have to specify that for every model, it's going to be long and repetitive, and would have to be expanded for every model we add to our system.
如果我必须为每个模型指定它,它将是冗长且重复的,并且必须针对我们添加到系统中的每个模型进行扩展。
I'm not sure you have to "do magic" with vue-router - why don't you just handle the parameter inside your component (or create a container-component, and handle the parameter there)?我不确定您是否必须使用vue-router “做魔术” - 为什么不直接处理组件内部的参数(或创建一个容器组件,并在那里处理参数)?
The snippet below shows that you can use external data to control what component should be displayed.下面的代码片段显示您可以使用外部数据来控制应显示的组件。 If you pass your model parameter down, then any existing (and registered) component-name can be displayed.
如果您向下传递模型参数,则可以显示任何现有(和注册)组件名称。
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>
In components
declaration, this
is not available and hence you can not access the props and other instance data.在
components
声明中, this
是不可用的,因此您无法访问道具和其他实例数据。
What you can do is create a computed property that returns a component.您可以做的是创建一个返回组件的计算属性。 Like this:
像这样:
<template>
<component :is="componentInstance" />
</template>
<script>
export default {
props: {
componentName: String,
},
computed: {
componentInstance() {
return () => import(`./modules/${this.componentName}/template.vue`);
},
},
};
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.