Question

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

主要-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;
  }

主要-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>

在这两种情况下我都收到错误

Answer 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

/仪表板
/仪表板/顺序

等。

如何在Aurelia路线（未找到错误路线）

1 个答案: