在Plunker中创建Aurelia路由遇阻：页面无法显示路由

Got it, let's tackle this Aurelia routing issue in Plunker—this is a super common gotcha since Plunker has subtle environment differences from local setups. Here are the key fixes to get your routes showing up:

1. Add the Critical <router-view> Element #

Looking at your partial app.html code, I don't see the <router-view></router-view> placeholder. This is where Aurelia renders matched route components, so it’s non-negotiable. Update your template like this:

<template>
  <h1>Hello</h1>
  <div class="row col-lg-6 col-lg-offset-3">
    <div class="btn-group col-sm-offset-1" role="group" aria-label="...">
      <a repeat.for="row of routes" route-href="route.bind: row" class="btn btn-default">${row.title}</a>
    </div>
    <!-- This is where route content will render -->
    <router-view></router-view>
  </div>
</template>

2. Verify Router Plugin Registration in main.js #

Plunker requires explicit registration of the Aurelia Router plugin in your bootstrapping code. Make sure your main.js looks like this:

import { Aurelia } from 'aurelia-framework';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-router'); // Don't skip this step!

  aurelia.start().then(() => aurelia.setRoot('app'));
}

3. Fix the Base Href for Plunker's Subpath #

Plunker serves your app from a subpath, so you need a correct <base href> in your index.html. Add this inside the <head> tag:

<base href="/">

If that doesn’t work, use a dynamic script to auto-set the base path:

<script>
  document.querySelector('base').href = window.location.pathname.replace(/\/[^\/]+$/, '/');
</script>

4. Double-Check Route Definitions in app.js #

Ensure your route config uses valid file paths (Plunker is strict about this). Example:

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

export class App {
  router;

  configureRouter(config, router) {
    config.title = 'Aurelia Routing Demo';
    config.map([
      { route: ['', 'home'], name: 'home', moduleId: './home', title: 'Home' },
      { route: 'about', name: 'about', moduleId: './about', title: 'About' }
    ]);

    this.router = router;
  }
}

Confirm your component files (like home.html, about.html) exist in the same directory as app.js in your Plunker file list.

5. Validate Dependencies in index.html #

Make sure you’re loading compatible Aurelia bundles in Plunker. A standard setup includes these scripts:

<script src="https://unpkg.com/aurelia-bootstrapper@2.3.3/dist/amd/aurelia-bootstrapper.js"></script>
<script src="https://unpkg.com/aurelia-framework@1.3.1/dist/amd/aurelia-framework.js"></script>
<script src="https://unpkg.com/aurelia-router@1.7.1/dist/amd/aurelia-router.js"></script>

These steps fix 90% of routing issues in Plunker for Aurelia. If you’re still stuck, sharing your full Plunker file structure would help narrow it down further.

内容的提问来源于stack exchange，提问作者Ray