javascript - Aurelia 命名为 router-view / viewPorts 不工作

Question

我无法使用我在路由配置中指定的视口正确填充布局视图。我有一个路由“styleguide”，它应该使用“sidebar”布局，用“sidebar.html”填充“sidebar”路由器视图，用“content.ts / html”填充“content”路由器视图

应用程序.ts

export class App {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.map([{ 
      route: "styleguide", 
      name: "styleguide", 
      layoutView: "layout/sidebar.html",
      viewPorts: {
        sidebar: { moduleId: "styleguide/sidebar.html" },
        content: { moduleId: "styleguide/index" },
      }
    }]);
  }
}

应用程序.html

<template>
  <router-view layout-view="layout/default.html"></router-view>
</template>

layout/default.html（本例中未使用）

<template>
    <router-view></router-view>
</template>

布局/sidebar.html

<template>
    <router-view name="sidebar"></router-view>
    <router-view name="content"></router-view>
</template>

样式指南/sidebar.html

<template>
  SIDEBAR!!
</template>

样式指南/index.ts

export class Index { }

样式指南/index.html

<template>
  CONTENT
</template>

问题：

• “在 styleguide/sidebar.html 的视图中没有找到路由器视图。” -- 虽然我已经指定了路由器视图名称等。
• 我确实有另一条路线没有指定 a layoutView，因此使用默认值。这仅在我将router-viewlayout/default.html 中的元素替换为slot. 我尝试在两种布局中使用插槽，但侧边栏布局给了我同样的错误。

标签： javascriptaurelia

Answer 1

你得到的错误是因为你app.html不支持viewPorts。只有一个<router-view/>具有默认名称，因此您的路线配置有 2 个视口，它因上述错误而失败。

根据文档，布局似乎是一种为您的路线实现类似槽的行为的方法，而不是放置<router-view/>给我的地方，似乎。