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

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

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

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

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

打开app.module.ts

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"

如下

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

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