Vue-Router 动态组件

Question

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

---

以往的研究

我的解决方案基于this thread。

---

代码示例

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>

{场景}.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 中的道具定义。 this question 的答案解释了我做错了什么。如果我想使用道具验证，我的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值绑定正确，日志输出到开发工具控制台。