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 }
        }
      ]
    }
  ]
}

问题

似乎没有输入render的{{1}}功能。没有记录任何内容。我已经让它进入一次或两次这个功能，但我不确定我做了什么不同的事情才能实现，即使确实发生了，也没有设置道具。

我尝试过的其他事情 替代路线：

ScenarioSelector

对于这个，来自着陆页的链接（只是/ dialog / {Scenario}）没有做任何事情。

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 }
        }
      ]
    }
  ]
}

同样，在这种情况下，链接什么都不做。

修改

我之前在帖子中提到，我不确定我做了什么不同的代码来执行代码。我刚刚在子路径中将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 } } ] } ] }更改为*，然后执行。以下示例：

Answer 1

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

我在编辑过程中已经提到过这个。我应该使用"/"作为孩子们的路径，而不是"*"。我认为"*"本来是更安全的选择，因为路径的最后部分是什么并不重要，但它似乎不起作用（如果有人能详细说明原因，那将非常感激）。有关相关代码部分，请参阅问题的修改部分。
第二个问题是ScenarioSelector.js中我的道具定义。 this question的答案解释了我做错了什么。如果我想使用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)
    }
}

修复这两个问题后，道具值被正确绑定，日志输出到开发工具控制台。

Vue-Router动态组件

1 个答案: