Question

我无法获得布局视图以正确填充我在路由配置中指定的视图端口。我有一条路线“ styleguide”，应该使用“侧边栏”布局，用“ sidebar.html”填充“侧边栏”路由器视图，用“ content.ts / html”填充“内容”路由器视图

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>

布局/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的视图中找不到路由器视图。” -尽管我已经指定了路由器视图名称，等等。
我确实有另一条未指定layoutView的路由，因此使用默认路由。仅当我用router-view替换layout / default.html中的slot元素时，此方法才有效。我试图在两种布局中都使用插槽，但是侧栏布局却给了我同样的错误。

Answer 1

您收到的错误是因为您的app.html不支持viewPorts。默认名称只有一个<router-view/>，因此在您的路由配置中有2个视口的情况下，由于上述错误而失败。

根据文档，布局似乎是一种实现路径类似槽的行为的方法，似乎不是将<router-view/>放在我身上的地方。

Aurelia命名为router-view / viewPorts无效

1 个答案: