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

「爱情、让人受尽委屈。」 2022-05-08 07:34 830阅读 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';
  4. import { RouterModule, Routes } from '@angular/router';
  7. import { AppRoutingModule } from './app-routing.module';
  8. import { AppComponent } from './app.component';
  9. import { LoginListComponent } from './login/login-list/login-list.component';
  10. import {IndexListComponent} from './index/index-list/index-list.component';
  11. const appRoutes: Routes = [
  12.   { path: 'loginList', component: LoginListComponent , data: { title: 'login List' }},
  13.   { path: 'index-list' , component: IndexListComponent, data: { title: 'index-list'} },
  14.   { path: '',
  15.     redirectTo: 'loginList',
  16.     pathMatch: 'full'
  17.   },
  18.   { path: '**', component: LoginListComponent }
  19. ];
  21. @NgModule({
  22.   declarations: [
  23.     AppComponent,
  24.     LoginListComponent,
  25.     IndexListComponent
  26.   ],
  27.   imports: [
  28.     BrowserModule,
  29.     AppRoutingModule,
  30.     RouterModule.forRoot(
  31.       appRoutes,
  32.       { enableTracing: true } // <-- debugging purposes only
  33.     )
  34.   ],
  35.   bootstrap: [AppComponent]
  36. })
  37. 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 条评论，830人围观）

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

相关阅读