如何在奥雷利亚路由(找不到错误路由)

Question

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

主路由器.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;
}

主干线.html

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

--------这是第一个儿童路由器--------

前面.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;
}

前面.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>

在这里我想使用路由器

标题.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>

标头.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');
}
}

我正在尝试两种方法。 第一：注入路线。之后尝试调用"导航到路线">

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

2nd：使用自定义属性"route-href">

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

在这两种情况下，我都得到一个错误

Answer 1

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

这是主路由器.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.正面.js2.仪表板.js

多亏了这条线，您可以使用下一个路由

route: ['', '*path']

前面.js

• /接触
• /大约

仪表板.js

• /挡泥板
/
• 仪表板/订单

等。。