Aurelia JS中的嵌套路由 [英] Nested routing in aurelia js

问题描述

有没有办法在Aurelia JS中嵌套路由/子路由器?
就像我们在ui-router中用于角度js一样?
这样我们就可以实现

Is there any way to have nested routing/child router in Aurelia JS
as we have in ui-router for angular js?
so that we can achieve following

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

TIA

推荐答案

是的.

多个查看端口

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

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

You can define two or more different views to be affected by a route, by creating more than one <router-view> in your template like this:

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

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

And then defining both destinations in your individual routes:

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

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

有关如何访问路由器以创建父/子组件路由的深入说明，请参阅此帖子和第一个答案.

See this post and the first answer for an in-depth explanation for how to access the Router to create parent/child component routing.

直接链接到主导航菜单中的两个父级/子级视图/控制器

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

In summary, you probably need to access your main router by injecting it into any parent components that need child routing, like this:

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中查看骨骼导航示例. -导航.有很好的例子，包括如何进行子路由.

You should check out the skeleton-navigation examples at https://github.com/aurelia/skeleton-navigation. There are good examples, including how to do child routing.

这篇关于Aurelia JS中的嵌套路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！