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

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

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

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

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

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

打开app.module.ts

![70][]

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { RouterModule, Routes } from '@angular/router';
    
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { LoginListComponent } from './login/login-list/login-list.component';
    import {IndexListComponent} from './index/index-list/index-list.component';
    const appRoutes: Routes = [
      { path: 'loginList', component: LoginListComponent , data: { title: 'login List' }},
      { path: 'index-list' , component: IndexListComponent, data: { title: 'index-list'} },
      { path: '',
        redirectTo: 'loginList',
        pathMatch: 'full'
      },
      { path: '**', component: LoginListComponent }
    ];
    
    @NgModule({
      declarations: [
        AppComponent,
        LoginListComponent,
        IndexListComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        RouterModule.forRoot(
          appRoutes,
          { enableTracing: true } // <-- debugging purposes only
        )
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

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

routerLink="/index-list"

如下

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

[70]: /images/20220508/238f70bc05514fa8a1fd66de93f3e47e.png