[英]Angular routing not working, it redirects me to the base url
I am trying to use angular router
to navigate from my page. 我正在尝试使用
angular router
从我的页面导航。
I have a button
on click of which I am navigating to some other page. 我单击一个
button
,然后导航到其他页面。
My current url is: http://localhost:4200/user/12345567
. 我当前的网址是:
http://localhost:4200/user/12345567
。 From here I click on button to navigate away 从这里,我单击按钮以导航
Here is my button
code: 这是我的
button
代码:
leaveArea(){
this.router.navigate([ 'account', 'dashboard'], {relativeTo: this.route});
}
I want to navigate to http://localhost:4200/account/dashboard
on click. 我想在单击时导航到
http://localhost:4200/account/dashboard
。
But instead I get navigated to http://localhost:4200
. 但是相反,我导航到
http://localhost:4200
。 For an instant (maybe a milli-second or even less), I do see the url as http://localhost:4200/account/dashboard
before it navigates to http://localhost:4200
. 有一瞬间(可能是一毫秒或更短的时间),在导航到
http://localhost:4200
之前,我确实看到该URL为http://localhost:4200/account/dashboard
。 Is there something wrong with the routing logic? 路由逻辑有问题吗?
Edit 编辑
I am adding the routeTrace
results: 我正在添加
routeTrace
结果:
Edit 编辑
Here is my routing file: 这是我的路由文件:
const appRoutes: Routes = [
{ path: "", component: HomeComponent },
{ path: "account/dashboard", component: AccountDashboardComponent},
{
path: "user/:id", component: UserComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule {}
Simply try using router.navigateByUrl
like this - 只需尝试像这样使用
router.navigateByUrl
leaveArea(){
this.router.navigateByUrl('/account/dashboard');
}
PS: By appending /
in the start of the string will consider routing from root level. PS:通过在字符串的开头添加
/
,将考虑从根级别进行路由。
You have the blank route first . 首先 ,您有空白的路线。
It needs to be last . 它必须是最后的 。
The order of the routes in the configuration matters and this is by design.
路由在配置中的顺序很重要,这是设计使然。 The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes.
路由器在匹配路由时会使用“先赢”策略,因此应将更具体的路由放在不那么具体的路由之上。 ( https://angular.io/guide/router )
( https://angular.io/guide/router )
So... 所以...
const appRoutes: Routes = [
{ path: "account/dashboard", component: AccountDashboardComponent},
{ path: "user/:id", component: UserComponent},
{ path: "", component: HomeComponent}
];
Please try and change your routes to 请尝试将您的路线更改为
const appRoutes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" }
{ path: "home", component: HomeComponent },
{ path: "account/dashboard", component: AccountDashboardComponent},
{ path: "user/:id", component: UserComponent }
];
And change your navigation line to 并将您的导航线更改为
this.router.navigate(['/account', 'dashboard']);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.