我正在尝试将旧的BackBone.js应用程序更新为Angular(4/5)。要求之一是在此新应用中继续使用旧路线,这会引发一些挑战。
旧路线的构建如下:
site.com/r/{username}/{route}
例如
site.com/r/johndoe/homepage
site.com/r/janedoe/blog
我现在正在使用没有哈希的Angular路由,但是我在Angular中构建的每个路由现在都包含一个长字符串:
{ path: '/r/:username/homepage' }
我希望这里有一种更清洁的使用路线的方法。:username变量仅在引导应用程序时才需要,因此从Url中剥离掉第一位并在此之后启动NG路由路径会更好。
我知道base href会将应用程序编译到潜在的子目录,但这不适用于变量username。
有没有办法在Angular中完成这项工作?
你可以执行以下操作:
const appRoutes: Routes = [
{
path: 'r',
component: AppComponent,
children: [
{ path: ':username/homepage', component: HomePageComponent },
// other children or you can use loadChildren
]
}
];
https://angular.io/guide/router#lazy-loading-route-configuration
谢谢,这似乎是一种更好的方法。由于我只想在引导应用程序时使用:username,因此我想到了:
{ path: 'r/:username', component: AppComponent, children: [ { path: 'homepage', component: HomePageComponent' } ] }