javascript - Aurelia 命名路由器 View /viewPorts 不工作

Question

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

app.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" },
      }
    }]);
  }
}

app.html

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

layout/default.html(本例中未使用)

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

layout/sidebar.html

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

styleguide/sidebar.html

<template>
  SIDEBAR!!
</template>

styleguide/index.ts

export class Index { }

styleguide/index.html

<template>
  CONTENT
</template>

问题:

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

Answer 1

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

布局，根据文档，似乎是一种为您的路由实现类似插槽行为的方式，而不是放置 <router-view/> 的地方。对我来说，似乎。