Question

嗨，我是Aurelia框架的新手。我陷入了路由。我也安装了aurelia-router，但它仍无法正常工作。

以下是我的app.js

export class App {
message = "Hello Pathways";
configureRouter(config, router){
config.title = 'Aurelia';
config.options.pushState = true;
config.options.root = '/';
  config.map([
     { route: ['','home'],  name: 'home',  
        moduleId: './components/home/home',  nav: true, title:'Home' },
     { route: 'about',  name: 'about',
        moduleId: './components/about/about',    nav: true, title:'About' }
  ]);
  this.router = router;}}

以下是我的app.html文件

<template>
    ${message}
    <nav>
        <ul>
            <li repeat.for = "row of router.navigation">
                <a href.bind = "row.href">${row.title}</a>
            </li>
        </ul>
    </nav>
    <router-view></router-view>
</template>

当我运行此页面时，它显示一个空白页面，如果我删除了路由器视图标记，则会显示包含欢迎消息的页面。

在config.js中，我更改了以下内容。

paths: {
    "*":"src/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
},

请帮我解决这个问题。我试过这个超过2天了。

Answer 1

import { Router, RouterConfiguration } from 'aurelia-router';
import { autoinject } from 'aurelia-framework';

@autoinject
export class App {


 configureRouter(config: RouterConfiguration, router: Router) {
        this.router = router;
        config.map([
                     {
                      route: ['', 'home'], name: 'home', moduleId: './components/home/home', nav: true, title: 'Home'
                      },
                      {
                       route: 'about', name: 'about', moduleId: './components/about/about', nav: true, title: 'About'
                      }
                 ]);
    }

 <ul class="navbar">
   <template repeat.for="route of router.navigation">
      <li class="${route.isActive ? ' active ' : ' '}">
                <a class="navbar-link" href.bind="route.href">${route.title}</a>
      </li>
    </template>
 </ul>

此代码正在我这边工作

Answer 2

检查您的config.map

config.map（[ （路线：[''，'home']，名称：'home'，
moduleId：'./components/home/home'，nav：true，标题：'Home'），

您正在通过一遍又一遍地路由到同一页面来创建无限地图。

尝试删除''并替换为其他内容。（路线：['base'，'home']，名称：'home'，
看看它是否运行。

Aurelia路由器不工作

2 个答案: