Question

我在app-routing.module.ts中定义了以下路由变量：

const routes: Routes = 
[
  { path: '', redirectTo: '/users', pathMatch: 'full' }, 
  { path: 'users',  component: UsersComponent },
  { path: 'dashboard',  component: DashboardComponent }
];

使用此当前配置，当我提交http://localhost:3000/users时，浏览器会重定向到http://localhost:3000/users/users，然后按预期在html中显示用户列表绑定。

然而，浏览器从/ users重定向到/ users / users似乎有些不可思议。如果我使用redirectTo属性删除第一个路由配置，那么浏览器将保留在/ users上，而不会重定向到/ users / users。但是，在这种情况下，用户列表绑定不会按预期显示。

知道可能导致重定向到/ users / users的原因是什么？我知道如何保持浏览器/用户并让用户列表绑定正确显示在这个uri？

Answer 1

选项1：设置基本标记

为了使路由器正常工作，需要以某种方式为应用程序定义基本href。文档建议adding a base element到index.html文件的头部，例如：

<base href="/">

选项2：设置提供者

这可能有点危险，因为它在锚标签上有(potentially unexpected) side effects，空的href标签等等。它还会破坏内联svg精灵......这是我们应用程序的主要部分。用户界面。如果你想让路由器工作但不打破很多东西，你可以在其他地方实际定义基本的href，如下所示：

// ... other imports
import { APP_BASE_HREF } from '@angular/common';

@NgModule({

    // ... other pieces of ngModule

    providers: [
        {provide: APP_BASE_HREF, useValue : '/' }
    ],

    // ... other pieces of ngModule
})
export class AppModule {
    constructor() {}
}

作为一个基本的例子。在文档中找到它有点难，但它是一个很好的解决方法，可以让事情顺利进行而不会弄乱其他所有内容。

路由行为无法按预期工作

1 个答案:

选项1：设置基本标记

选项2：设置提供者