Aurelia:如何在子路线之间导航 [英] Aurelia: How navigate between child routes

问题描述

我试图从一个子路线导航到另一条子路线，但我不断得到Route not found.我的主要问题:如何在子视图之间导航?

I'm trying to navigate from one child route to another, but I continually get Route not found. My primary question: how to navigate between child views?

下面是代码，下面我还会有其他问题.

Below is the code, and I'll have additional questions below, too.

应用程序模式视图 应用类别:

export class App {
  configureRouter(config, router) {
    config.title = 'My Site';

    config.map([
      { route: ['','job-view'], name: 'jobView', moduleId: './job-view', nav: true, title:'Jobs'},
      { route: ['services'], name: 'services', moduleId: './services', nav: true, title:'Services'}
    ]);

    this.router = router;
    this.router.refreshNavigation();
  }
}

问题2 :如果始终可以从aurelia-router访问router，为什么我们需要在此处保存router?

Q.2: Why do we need to save router here if it's always accessible from aurelia-router?

应用页面:

<template>
  <require from='./nav-bar'></require>
  <nav-bar router.bind="router"></nav-bar>
  <div class="container">
      <router-view></router-view>
  </div>
</template>

好，现在我们已经定义了根页面视图和导航，让我们定义job-view MV.

Ok, so now that we have our root page view and nav defined, let's define the job-view MV.

JobView班:

export class JobView {
  configureRouter(config, router) {
    config.map([
      { route: ['','jobs'], name: 'jobs', moduleId: './jobs', nav: false, title:'Jobs', settings:{icon:'glyphicon glyphicon-align-justify'} },
      { route: ['job/:id'], name: 'job', moduleId: './job', nav: false, title:'Job Details'}
    ]);

    this.router = router; //WHY SAVE THIS?
    this.router.refreshNavigation();
  }
}

JobView页面:

<template>

    <router-view></router-view>

</template>

现在，这是子视图.我的假设是发生的路由应该相对于job-view.理想情况下，这就是我想要的.

Now, here are the child views. My assumption that is that routing that occurs should be relative to job-view. That's what I want, ideally.

工作班 (为简洁起见，删除了一堆代码):

import {Router} from 'aurelia-router';

    @inject(Router)
    export class Jobs {

    constructor(router) {
      this.router = router;
    }

    toJob(id) {
      // this.router.navigateToRoute("job", {id:id}); // ERROR - ROUTE NOT FOUND
      this.router.navigate("#/job-view/job/".concat(id)); // THIS WORKS
    }
}

Q.3 :我已经看到router.navigateToRoute和router.navigate都被引用了，但是没有指示何时使用它们或两者之间有什么区别，并且该文档也没有解释.应该使用哪个? 文档

Q.3: I've seen both router.navigateToRoute and router.navigate referenced, but no indication when to use either or what the difference is, and the document doesn't seen to explain. Which should be used? Docs

工作页: jobs.html的详细信息无关紧要，因此不在此处列出.

Jobs Page: Details for jobs.html are irrelevant, so not listing them here.

最后，job视图:

工作班: 与job.js无关，因此与列表代码无关.我最多可以执行导航回jobs的操作，但这将在页面下面进行处理.

Job Class: Nothing relevant for job.js, so not listing code. At most I may perform navigation back to jobs, but that's handled below in the page.

工作页:

<!-- a bunch of html //-->
<!-- HOW TO USE ROUTER IN HTML, NOT BELOW URL HREF? //-->
<a href="#/jobs">Print Jobs</a>
<!-- a bunch of html //-->

第4季度:同样，即使在HTML页面中，我也希望路由至相对.上面的方法不起作用，那我该怎么用?

Q.4: Again, I'd like routing to relative, even in the HTML page. The above won't work, so what should I use?

在类似的问题中，有一个建议的答案，但是将job-view注入到job中并使用的已保存路由器也不起作用.

There was a proposed answer in a similar question, but injecting job-view into job and using job-view's saved router didn't work either.

顺便说一句，如果我手动导航到http://localhost:3000/#/job-view/job/3，该页面会很好地加载，因此路由器很清楚.

By the way, if I manually navigate to http://localhost:3000/#/job-view/job/3 the page loads fine, so it's clear something with the router.

注意事项: 在如何访问Aurelia中的子路由器吗?但是没有一个可行的解决方案来回答.

Note to mod: A similar question was ask at How to access child router in Aurelia? but it wasn't answered with a solution that works.

推荐答案

我将在下面尝试一个一个地回答您的问题.

I will try to answer you questions one by one below.

我将从第二季度开始

Q.2:如果总是可以从以下位置访问路由器，为什么我们需要在此处保存路由器 奥雷利亚路由器?

Q.2: Why do we need to save router here if it's always accessible from aurelia-router?

因此，在您的 App Mode-View App Class 中，您在视图中引用了路由器属性:<nav-bar router.bind="router"></nav-bar>，这就是为什么您需要声明该属性然后使用它的原因.在第二种视图中，您不是，所以您不需要它:-)

So in your App Mode-View App Class you are referencing router property in your view: <nav-bar router.bind="router"></nav-bar>, that's why you need to declare the property to use it then. In the second view you are not so you don't need it :-)

当您需要对main.ts/main.js(应用程序的起点)中的路由器进行某些操作时，也会添加属性router.这是因为路由器是首次在此处配置，并且注入不会在构造函数中起作用，因此您需要保存此属性以在configureRouter(..)方法中获取它(注意:这是Beta 1之前的情况，我不知道)不知道现在是否还在那里.

The property router is also added when you need do something with the router in main.ts / main.js - the starting point of you application. This is because the router is configured for the first time there, and injection will not work in constructor, so you need to save this property to get it in configureRouter(..) method (note: this was a case before beta 1, I don't know if it's still there now).

在您的代码中，您需要调用this.router.refreshNavigation();，这将确保您的路由器使用有关路由当前位置的新信息进行更新.

In your code you have a call for this.router.refreshNavigation(); this will ensure that your router is updated with new information regarding current location of the routing.

Q.3:我已经看到router.navigateToRoute和router.navigate都被引用了，但是没有指示何时使用两者之一或区别是什么，并且该文档也没有解释.应该使用哪个?文件

Q.3: I've seen both router.navigateToRoute and router.navigate referenced, but no indication when to use either or what the difference is, and the document doesn't seen to explain. Which should be used? Docs

方法router.navigate(fragment: string, options?: any)使用URL片段而不是路线名称进行导航，因此router.navigate('#/app/child', {...<options - not params od the URL>...}).必须使用此方法在路由器之间进行绝对导航，并访问父URL等.

The method router.navigate(fragment: string, options?: any) uses an URL fragment not a route name to navigate, so e.g. router.navigate('#/app/child', {...<options - not params od the URL>...}). This method must be used to navigate absolutely between routers, and to access parent URL etc.

如果仅在当前路由器上导航，则将始终使用router.navigateToRoute(route: string, params?: any, options?: any).此方法使用的是路由名称，而不是URL，我们只是在自定义路由映射中放置了一个路由名称("custom"是指当前子路由映射，或与我们在页面上的URL位置有关的当前主路由).如您所见，您可以在此处以更方便的方式传递URL参数.您可以使用params对象，而不是将URL与params串联.

If you only are navigating around the current router you will always use router.navigateToRoute(route: string, params?: any, options?: any). This method is using a route name, not URL, co we just put there a name of route in the custom routing map (custom means the current child routing map, or current main routing regarding the URL location we are on the page). Here you can pass URL params in more convenient way, as you can see. You can use a params object instead of concatenating the URL with params.

Q.4:我还是想路由到相对页面，即使在HTML页面中也是如此.上面的方法不起作用，那我该怎么用?

Q.4: Again, I'd like routing to relative, even in the HTML page. The above won't work, so what should I use?

在Aurelia中，我们不直接将a标记的href属性用于导航.正如Brandon回答的那样，您必须使用route-href属性，该属性可能没有出现在论坛和门户网站上.这等效于router.navigateToRoute(route: string, params?: any, options?: any)，因此，在这种情况下，您可以使用自定义属性或仅使用click.triger="navTo('#/app/child')"(在视图模型中实现navTo()方法的情况下)，则不能使用它在路由器之间导航. :

In Aurelia we are not using href attribute of the a tag directly for navigation. As already answered by Brandon, you have to use route-href attribute, which is probably nowhere documented just appears around on forums and portals. This is equivalent of the router.navigateToRoute(route: string, params?: any, options?: any), so you cannot use it to navigate between routers in such case you can use custom attribute or just use click.triger="navTo('#/app/child')", where the navTo() method is implemented in your View-Model and looks like this:

public navTo(routeName: string) {
    // Assuming you are injecting router somewhere in the constructor
    this.router.navigateToRoute(routeName);
}

最后是您的主题问题:

Q.1:如何在子路线之间导航

Q.1: How navigate between child routes

现在您可能已经知道答案了，只需使用:router.navigate(fragment: string, options?: any)带有绝对URL.

Probably now you know the answer, just use: router.navigate(fragment: string, options?: any) with absolute URL.

下面的示例自定义属性可解决此问题:

Below example custom attribute to solve this:

import {inject} from "aurelia-dependency-injection";
import {Router} from "aurelia-router";
import {customAttribute} from "aurelia-framework";

@customAttribute('nav-href')
@inject(Element, Router)
export class NavHref {
    private value: string = '';

    constructor(private element: Element, private router: Router) {
        let $this = this;
        element.addEventListener('click', () => {
            if ($this.value === 'back') {
                $this.router.navigateBack();
            } else {
                // expression
                $this.router.navigate($this.value);
            }
        });
    }

    public valueChanged(newValue: string, oldValue: string) {
        this.value = newValue;
    }
}

首先，您需要将其导入HTML，我将文件命名为nav.href.ts:

First you need to import it in your HTML, I named my file nav.href.ts:

<require from="common/nav.href"></require>

然后在您的HTML代码中使用它:

Then just use it in you HTML code:

<a nav-href="#/home/any-location">My link to any location</a>

希望这会对您有所帮助，加油:-)

Hope this will help you, cheers :-)

这篇关于Aurelia:如何在子路线之间导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！