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工具控制台。