Aurelia父子路由配置咨询：如何实现指定层级路径的正确路由？

Hey there! Let's break down your Aurelia routing questions step by step. I've worked through similar multi-viewport and nested routing setups before, so here's how to tackle this:

1. Correct Configuration for #/items/ and #/items/:id/summary #

For #/items/ #

Your existing route definition for ['items'] is already on the right track. Aurelia automatically normalizes trailing slashes, so defining route: ['items'] will handle both #/items and #/items/ seamlessly. Here's the refined snippet that aligns with your existing structure:

{
  route: ['items'], // Handles both #/items and #/items/
  name: 'Items',
  viewPorts: {
    itemNavigation: { moduleId: 'path/to/your-items-navigation' },
    currentItem: { moduleId: 'path/to/your-items-selection-list' } // Renders project selection options
  },
  nav: true,
  title: 'Items'
}

For #/items/:id/summary #

This path is a child route of #/items/:id, so we first need to set up a parent route for items/:id, then nest the summary route under it. Here's how that fits into your partial config:

{
  route: ['items/:id'],
  name: 'ItemParent',
  viewPorts: {
    itemNavigation: { moduleId: 'path/to/your-items-navigation' },
    currentItem: { moduleId: 'path/to/your-item-host-container' } // This view will host child routes
  },
  // Enable child routing for this parent
  children: [
    {
      route: ['summary'], // Maps directly to #/items/:id/summary
      name: 'ItemSummary',
      moduleId: 'path/to/your-item-summary',
      title: 'Project Summary'
    }
  ]
}

Critical Note: The your-item-host-container view must include a <router-view> element—this is where the child route content (like the summary) will render.

2. Implementing Parent-Child Routing for Full Hierarchy #

To support all three paths (#/items, #/items/:id/summary, #/items/:id/detail), we'll extend the parent-child structure while keeping your existing multi-viewport setup intact. Here's the complete routing configuration:

Full Routing Array #

export const routes = [
  { route: '', redirect: 'items' },
  {
    route: ['items'],
    name: 'Items',
    viewPorts: {
      itemNavigation: { moduleId: 'path/to/your-items-navigation' },
      currentItem: { moduleId: 'path/to/your-items-selection-list' } // Shows project selection options
    },
    nav: true,
    title: 'Items'
  },
  {
    route: ['items/:id'],
    name: 'ItemParent',
    viewPorts: {
      itemNavigation: { moduleId: 'path/to/your-items-navigation' },
      currentItem: { moduleId: 'path/to/your-item-host-container' } // Hosts child routes
    },
    // Define all child routes here
    children: [
      {
        route: ['summary'], // #/items/:id/summary
        name: 'ItemSummary',
        moduleId: 'path/to/your-item-summary',
        title: 'Project Summary'
      },
      {
        route: ['detail'], // #/items/:id/detail
        name: 'ItemDetail',
        moduleId: 'path/to/your-item-detail',
        title: 'Project Details'
      },
      {
        route: [''], // Redirect #/items/:id to #/items/:id/summary by default
        redirect: 'summary'
      }
    ]
  }
];

Key Setup Details #

• Parent View Requirement: Add a <router-view> to your your-item-host-container.html to render child content. Example:

  <template>
    <!-- Optional parent-level content (e.g., breadcrumbs) -->
    <div class="breadcrumbs">
      <a route-href="route: Items">Items</a> > <span>${$route.params.id}</span>
    </div>
    <!-- Child route content renders here -->
    <router-view></router-view>
  </template>
  

• Default Redirect: The child route route: [''] ensures users landing on #/items/:id are sent directly to the summary view, avoiding empty content.
• Link Generation: Use the named routes to create navigation links easily, e.g.:

  <a route-href="route: ItemDetail; params.bind: {id: selectedItem.id}">View Full Details</a>
  

Quick Troubleshooting Tips #

• Test each path to confirm navigation works as expected
• Check the browser console for errors (common issues: missing <router-view> in parent views, incorrect module paths)
• Verify that your viewport names match exactly between the route config and your HTML templates

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