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

我做了一个简单的路由器。然而，我需要将主路由器分成两个子计算机。 之后，路由停止工作。控制台中出现错误： “错误：找不到路由：/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;
  }

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

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

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

main route.html

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

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

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

front.html

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

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

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

我试着用两种方法来做到这一点。 第一：与注入路线。然后试着打电话给“导航路线”

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

第二：使用自定义属性“路由href”

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

在这两种情况下，我都出现了一个错误

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

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

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

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

 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

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

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

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

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

由于这条线路，您可以使用下一个路由

route: ['', '*path']

front.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;
  }

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

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

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

• /接触
• /关于

dashboard.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;
  }

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

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

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

• /仪表板
• /仪表板/订单

---

等等

我在main-router.js中做了一些更改，而不是“我插入了这个”home“<代码>{route:'home'，name:'home'，moduleId:PLATFORM.moduleName（'./front'），nav:true}但是现在我的浏览器地址栏看起来像“/#/home”和“/#/home/contacts/”，还有其他方法吗？你的代码看起来不错。通过使用多个Shell而不是子管线，可以更好地解决您在此处尝试执行的操作。如果您有一个正在运行的示例可能会有所帮助。试着在这里复制你的代码：我想用两种不同的路径创建两个不同的页面。我想使用front.js而不改变地址栏。示例：只有此路由器应该由页眉和页脚包围。第一路由器（front.js）/-主页（front home）/about-（关于）第二路由器（dashboard.js）/dasboard-（dashboard页面）/dasboard/orders等感谢您的帮助。我找到了一个解决方案，你可以在下面看到。