aurelia js中的嵌套路由

时间:2016-12-26 10:51:39

标签: aurelia aurelia-router

有没有办法在Aurelia JS中使用嵌套路由/子路由器 因为我们在ui-router中有角度js?
这样我们就可以实现以下目标

  • 更新部分视图(仅更新给定事件的选定部分)。
  • 在组件中具有父子关系

TIA

1 个答案:

答案 0 :(得分:2)

是的,确实如此。

多个视图端口

http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/9

您可以通过在模板中创建多个<router-view>来定义两个或多个不同的视图以受路由影响:

<template>
  <div class="page-host">
    <router-view name="left"></router-view>
  </div>
  <div class="page-host">
    <router-view name="right"></router-view>
  </div>
</template>

然后在各个路线中定义两个目的地:

{ route: 'users', name: 'users', viewPorts: { left: { moduleId: 'user/list' }, right: { moduleId: 'user/detail' } } }

从父级访问路由器以影响孩子

有关如何访问路由器以创建父/子组件路由的详细说明,请参阅此文章和第一个答案。

Linking directly to both parent+child views/controllers from the main navigation menu

总之,您可能需要通过将其注入需要子路由的任何父组件来访问您的主路由器,如下所示:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
@inject(Router)
export class SomeParent {
  constructor(router) {
    this.router = router;
  }
}

更多示例

您应该查看https://github.com/aurelia/skeleton-navigation处的骨架导航示例。有很好的例子,包括如何进行子路由。