Angular路由設置

Angular 路由詳解

基本路由【一級】

• 路由設置

//app-routing.module.ts  文件內的設置
// angular核心庫
import { NgModule } from '@angular/core';
// Router 路線 RouterModule控制器模塊
import { Routes, RouterModule } from '@angular/router';

// 一級路由引入
import {IndexComponent} from "./components/index/index.component"
import {CarComponent} from "./components/car/car.component"
import {UserComponent}from "./components/user/user.component"

//path裏面的地址是自定義的--前面不加/
const routes: Routes = [
  {
    path:"index",
    component:IndexComponent,
  },{
    path:"car",
    component:CarComponent
  },{
    path:"user",
    component:UserComponent
  },
  // 一級路由重定向
  {
    path:"**",
    redirectTo:"index"
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 路由重定向

// 一級路由重定向
  {
    path:"**",
    redirectTo:"index"
  }
//做用：輸錯地址會定位到index主頁面上

• 路由出口

<!--app.component.html  文件裏面設置 -->
<router-outlet></router-outlet>

---

嵌套路由【一級、二級嵌套】

• 路由設置

// angular核心庫
import { NgModule } from '@angular/core';
// Router 路線 RouterModule控制器模塊
import { Routes, RouterModule } from '@angular/router';

// 一級路由
import {IndexComponent} from "./components/index/index.component"
import {PlayComponent} from "./components/play/play.component"


// 二級路由
import {CarComponent} from "./components/car/car.component"
import {UserComponent}from "./components/user/user.component"
import {RankComponent} from "./components/rank/rank.component"
import {HomeComponent} from "./components/home/home.component"
const routes: Routes = [
  {
    path:"index",
    component:IndexComponent,
    children:[
      {
        path:'home',
        component:HomeComponent
      },
      {
        path:"rank",
        component:RankComponent
      },
      {
        path:"car",
        component:CarComponent
      },{
        path:"user",
        component:UserComponent
      },
        //二級重定向
      {
        path:"**",
        redirectTo:"home"
      }
  ]
  },{
    path:"play",
    component:PlayComponent
  },
  // 一級路由重定向
  {
    path:"**",
    redirectTo:"index"
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 重定向

  重定向同上---在二級路由同級下進行重定位

• 路由出口

<!-- index.component.html.ts中 -->
<router-outlet></router-outlet>
<div class="foot">
    <a routerLink="/index/home" routerLinkActive="select">主頁</a>
    <a routerLink="/index/rank" routerLinkActive="select">排行榜</a>
    <a routerLink="/index/car" routerLinkActive="select">購物車</a>
    <a routerLink="/index/user" routerLinkActive="select">個人</a>
</div>
<!-- 
	routerLink：和path地址同樣須要帶着一級路由
	routerLinkActive：動態樣式  選中後的樣式設置
-->