angular路由跳转页面地址栏跳转但是页面没有变化

「爱情、让人受尽委屈。」 2022-05-08 07:34 825阅读 0赞

angular路由跳转页面地址栏跳转但是页面没有变化

出现这个问题基本就是路由配置错误

ng路由跳转需要在app.module.ts里面配置相对应的路由

ng generate component index/index-list //创建文件夹

打开app.module.ts

70

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { RouterModule, Routes } from '@angular/router';
  4. import { AppRoutingModule } from './app-routing.module';
  5. import { AppComponent } from './app.component';
  6. import { LoginListComponent } from './login/login-list/login-list.component';
  7. import {IndexListComponent} from './index/index-list/index-list.component';
  8. const appRoutes: Routes = [
  9. { path: 'loginList', component: LoginListComponent , data: { title: 'login List' }},
  10. { path: 'index-list' , component: IndexListComponent, data: { title: 'index-list'} },
  11. { path: '',
  12. redirectTo: 'loginList',
  13. pathMatch: 'full'
  14. },
  15. { path: '**', component: LoginListComponent }
  16. ];
  17. @NgModule({
  18. declarations: [
  19. AppComponent,
  20. LoginListComponent,
  21. IndexListComponent
  22. ],
  23. imports: [
  24. BrowserModule,
  25. AppRoutingModule,
  26. RouterModule.forRoot(
  27. appRoutes,
  28. { enableTracing: true } // <-- debugging purposes only
  29. )
  30. ],
  31. bootstrap: [AppComponent]
  32. })
  33. export class AppModule { }

然后再html里面写点击跳转方法

  1. routerLink="/index-list"

如下

  1. <button type="button" class="btn btn-block btncustom10" routerLink="/index-list">walk up</button>

如果在app.module.ts里面没有设置相应的路由配置,则会出现地址栏跳转但页面没有跳转的现象。

发表评论

表情:
评论列表 (有 0 条评论,825人围观)

还没有评论,来说两句吧...

相关阅读