如何在 Aurelia 中路由（找不到错误路由）答案

【问题标题】：How to route in Aurelia (Error route not found)如何在 Aurelia 中路由（找不到错误路由）
【发布时间】：2018-06-18 18:22:37
【问题描述】：

我做了一个简单的路由器。但是，我需要将主路由器分成两个子路由器。在那之后，路由停止工作。我在控制台中遇到错误： “错误：找不到路线：/name”

main-router.js

  configureRouter(config, router) {
    this.router = router;
    // config.title = 'Aurelia';

    config.map([
      {
        route: ''
        , name: 'home'
        , moduleId: PLATFORM.moduleName('./front')
        , nav: true
      }, {
        route: 'dashboard'
        , name: 'dashboard'
        , moduleId: PLATFORM.moduleName('./dashboard')
      }
    ]);

    this.router = router;
  }

main-route.html

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

--------这是第一个子路由器--------

front.js

  configureRouter(config, router) {
    this.router = router;
    // config.title = 'Aurelia';

    config.map([
      {
        route: '', name: 'front-home', moduleId: PLATFORM.moduleName('pages/main-page/app'), nav: true
      }, {
        route: 'contacts', name: 'front-contacts', moduleId: PLATFORM.moduleName('pages/contacts/contacts'), nav: true
      }, {
        route: 'price', name: 'front-price', moduleId: PLATFORM.moduleName('pages/price/price'), nav: true
      }
    ]);

    this.router = router;
  }

front.html

<template>
    <require from="../pages/header/header"></require>
    <require from="../pages/footer/app-footer"></require>

    <header></header>
    <router-view swap-order="with"></router-view>
    <app-footer></app-footer>
</template>

这里我想用路由器

header.html

<template>
    <require from="./header.scss"></require>
    <nav class="top-nav">
        <div class="nav-wrapper grey lighten-5">
            <a href="#" class="brand-logo center grey-text text-darken-3">
                <svg class="header-logo"></svg>
            </a>

            <ul class="right hide-on-med-and-down">
                <li><a class="grey-text text-darken-3" route-href="route: front-price;">Price</a></li>
                <li><a class="grey-text text-darken-3" click.delegate="navigateToContacts()" >Contacts/About</a></li>
            </ul>
</template>

header.js

import {inject, LogManager} from 'aurelia-framework';
import {Router} from 'aurelia-router';

const log = LogManager.getLogger('Header');

@inject(Router)
export class Header {
  constructor(router) {
    this.router = router;
    log.info('ROUTER => ', router);
  };

  navigateToContacts() {
    this.router.navigateToRoute('front-contacts');
  }
}

我正在尝试通过两种方式来做到这一点。第一：与注入路线。然后尝试调用'navigateToRoute'

this.router.navigateToRoute('front-contacts');

第二个：带有自定义属性'route-href'

<li><a class="grey-text text-darken-3" route-href="route: front-price;">Price</a></li>

在这两种情况下，我都会遇到错误

【问题讨论】：

我通过 main-router.js 中的一些更改使其工作，而不是 ' ' 我插入了这个 'home'。 { route: 'home', name: 'home', moduleId: PLATFORM.moduleName('./front'), nav: true }但是现在我的浏览器地址栏看起来像'/#/home'和'/#/home/contacts/'还有别的办法吗？
您的代码看起来不错。您在这里尝试做的事情可能会通过使用多个外壳而不是子路由来更好地解决。如果您有一个可能有帮助的运行示例。尝试在此处复制您的代码：gist.run/?id=694735d4696c7bb371f0c3025af1fe5e
gist.run/?id=a551f0b3d930e843c27593917e58efe4 我想用两条不同的路线制作两个不同的页面。我想使用front.js而不改变地址栏。示例：只有这个路由器应该被页眉和页脚包围。第一个路由器 (front.js) / - 主页 (front-home) /about - (about) 第二个路由器 (dashboard.js) /dasboard - (dashboard-page) /dasboard/orders 等
感谢您的帮助。我找到了一个解决方案，你可以在下面看到。

标签： javascript aurelia

【解决方案1】：

我找到了解决方案。如果有人想使用类似的路由，那么您需要更改路由器的地址，这将是主要的。

这是 main-router.js

 configureRouter(config, router) {
    this.router = router;
    // config.title = 'Aurelia';

    config.map([
//      {
//        route: ''
//        , redirect: 'home'
//      }
      {
        route: ['', '*path']
        , name: 'home'
        , moduleId: PLATFORM.moduleName('./front')
        , nav: true
      }, {
        route: 'dashboard'
        , name: 'dashboard'
        , moduleId: PLATFORM.moduleName('./dashboard')
      }
    ]);

    this.router = router;
  }

他有两个子路由器 1. front.js 2. dashboard.js

感谢这一行，您可以使用下一个路由

route: ['', '*path']

front.js

/联系人
/关于

dashboard.js

/仪表板
/仪表板/订单

等等。

【讨论】：