Question

我有这个导航组件

<div class="mx">
  <ul class="xv">
    <li
      *ngFor="let item of items"
      class="main-nav__item main-nav__item--{{ item.theme }}"
    >
      <a
        routerLink="{{ item.category == 'home' ? '' : item.endpoint }}"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
        >{{ item.title }} </a>
    </li>
  </ul>
</div>
</nav>

在应用路由中

  {
    path: ":section/:layout/:layout_2/:site/:section",
    component: HomePageComponent,
  },

  {
    path: ":site/:section/:year/:month/:day/:title",
    pathMatch: "full",
    component: ArticlePageComponent

  },
 {
    path: "",
    pathMatch: "full",
    component: HomePageComponent
  },
...

所以我正在加载相同的组件但具有不同的数据，例如 HomePageComponent

所以路由器只从根/主页移动到一个部分页面但如果已经在版块页面，则不会切换到另一个版块页面，只会返回主页

Answer 1

请注意，您的整个路径都是“可变的”，因为它们仅由参数组成。 URL 本身只包含参数的值，而不包含参数名称。
因此路由器无法区分路由（可能只有在变量数量不同的情况下）。

例如将您的网址更改为

path: "section/:section/layout/:layout/layout_2/:layout_2/site/:site/section/:section"

然后路由器有机会根据“静态”部分区分路由。

角度路由器更改 url 但不加载组件/页面

1 个答案: