Vue-路由器动态组件

Question

我正在尝试使用vue-router创建一个单页vue.js应用程序。 默认路由（/）应该是指向其他页面（如登录页面）的链接的列表。 到目前为止，所有其他页面都是针对不同情况的对话框。 我希望尽可能直接地创建新对话框，因此我创建了一个基本对话框页面，该页面设置了通用对话框外观，同时将详细信息留给了特定途径。 分为三个部分：基本设置，日志记录设置和高级设置。 每个方案都需要基本设置，每个方案的日志记录设置都相同，而高级设置是可选的。 我正在使用命名的路由器视图来加载基本和高级设置。

---

先前的研究

我的解决方案基于此线程 。

---

代码样例

DialogPage.vue

 <template> <div> <div id="basic-options" class="options"> <router-view name="basicView" basic="true"/> </div> <div id="logging-options" class="alt-options"> <!-- Custom components needed for logging options. This renders properly. --> </div> <div id="advanced-options" class="alt-options"> <router-view name="advancedView" basic="false"/> </div> </div> </template> 

{Scenario} .vue

 <template> <div> <!-- custom components to set up basic dialogs for {Scenario} --> </div> </template> 

{Scenario} Advanced.vue与{Scenario} .vue相同，只不过在div中使用了不同的子级。

ScenarioSelector.js

 /* Import Scenario Here */ import ScenarioA from '@/components/Scenarios/A' import ScenarioAAdvanced from '@/components/Scenarios/AAdvanced' import ScenarioB from '@/components/Scenarios/B' import ScenarioBAdvanced from '@/components/Scenarios/BAdvanced' /* Add them to the list */ const components = { ScenarioA, ScenarioAAdvanced, ScenarioB, ScenarioBAdvanced } /* Don't change anything here */ export default { functional: true, props: [ { name: 'scenario', type: String }, { name: 'basic', type: Boolean, default: true } ], render (createElement, context) { var scenario = context.props.scenario console.log('Log anything, please') if (context.props.basic) { scenario += 'Advanced' } return createElement(components[scenario], context.data, context.children) } } 

router / index.js的相关部分

 export default new Router({ routes: [ /* Other routes */, { path: "/dialog/:scenario", component: DialogPage, props: true, children:[ { path: "*", components: { basicView: ScenarioSelector, advancedView: ScenarioSelector }, props: { basicView: true, advancedView: true } } ] } ] } 

---

问题

它似乎没有进入ScenarioSelector的render功能。 什么都没有记录。 我已经知道它要进入该函数一次或两次，但是我不确定我做了什么不同的工作来实现该功能，即使发生了，也没有设置任何道具。

---

我尝试过的其他方法替代路线：

 export default new Router({ routes: [ /* Other routes */, { path: "/dialog/", component: DialogPage, props: true, children:[ { path: "/:scenario", components: { basicView: ScenarioSelector, advancedView: ScenarioSelector }, props: { basicView: true, advancedView: true } } ] } ] } 

对于这一点，登录页面中的链接（只是/ dialog / {Scenario}）没有任何作用。

 export default new Router({ routes: [ /* Other routes */, { path: "/dialog/", component: DialogPage, props: true, children:[ { path: "ScenarioA", components: { basicView: ScenarioA, advancedView: ScenarioAAdvanced } }, { path: "ScenarioB", components: { basicView: ScenarioB, advancedView: ScenarioBAdvanced } } ] } ] } 

同样，在这种情况下，链接不执行任何操作。

---

编辑

我在帖子的前面提到过，我不确定为使该代码执行而做了什么不同的工作。 我只是在子路径中将*更改为/ ，然后执行。 示例如下：

 export default new Router({ routes: [ /* Other routes */, { path: "/dialog/:scenario", component: DialogPage, props: true, children:[ { path: "/", components: { basicView: ScenarioSelector, advancedView: ScenarioSelector }, props: { basicView: true, advancedView: true } } ] } ] } 

Answer 1

我刚刚使它正常工作。 有两个问题。

1. 我已经在编辑中提到了这一点。 我应该使用"/"作为孩子的路径，而不是"*" 。 我认为"*"将是更安全的选择，因为路径的最后部分是什么并不重要，但是它似乎不起作用（如果有人能详细说明原因，将不胜感激）。 有关相关代码部分，请参见问题的“ 编辑”部分。
2. 第二个问题是我在ScenarioSelector.js prop定义。 这个问题的答案解释了我做错了什么。 如果我想使用道具验证，那么我的props应该是一个对象。 相关代码示例如下：

 /* ... */ export default { functional: true, props: { scenario: String, basic: { type: Boolean, default: true } }, render (createElement, context) { var scenario = context.props.scenario console.log('Log anything, please') if (context.props.basic) { scenario += 'Advanced' } return createElement(components[scenario], context.data, context.children) } } 

解决了这两个问题之后，正确绑定了props值，并将日志输出到dev工具控制台。