Angular之路由

1.简介
当我们使用angular做项目的时候，本身是一个单页面应用，其实就是通过众多的组件进行切换，想要什么切换成什么样的功能组件。那这么多组件是如何切换的呢？也就是所说的页面跳转，这就使用到了路由，路由的主要作用就是控制页面的切换。

2.项目布局
一个angular项目的开始都需要做好布局。思考：一个页面上通常会有的东西，无非就是nav头部导航，主题内容，底部导航。头部导航又可以拆分成两个组件，用作首页跳转以及登录。再就是有一些页面比如说是个人中心，有多级导航，这里就可以做成二级路由，也相当于做了一个新的的项目。

3.看代码
嘴上说不清楚，直接看看代码

首先网站入口都是一个index页面，angular项目也是。

image.png

1）首先看index.html
导入bootstrap，使用初始组件：

2）接下来进入组件
组件名是在ts组件中声明的，找到之后就会指向html文件，在
app.component.html中：

这里使用到了路由的容器，以及放入了一个底部导航栏，因为底部导航栏都是一样的，所以就直接放到了，路由容器的下方。 通过路由容器会接着去找路由

3）把配置好的路由表单独拿出来app-routing.module.ts

 //配置路由
import{NgModule} from '@angular/core';
import { LoginStateComponent } from './nav-bar/login-state/login-   
state.component';
import { LoginComponent } from './person-center/login/login.component';
import { RegistComponent } from './person-center/regist/regist.component';
import { IndexComponent } from './index/index.component';
import { SearchListComponent } from './search/search-list/search-     
list.component';
import {componentFactoryName} from "@angular/compiler";
//导入模块
import{RouterModule,Routes} from "@angular/router";

//配置路由表
const routes: Routes = [
{
path: 'index',
component: IndexComponent
},
{
path: 'login',
component: LoginComponent
},
{
path: 'regist',
component: RegistComponent
},
// {
//   path: 'detail/:id',
//   component: PositionDetailComponent
// },
{
path: '',
redirectTo: 'index',
pathMatch: 'full'
}
// {
//   path: '**',
//   component: PageNotFoundComponent
 //
  // }
];

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

---

导入app.module.ts中

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';


import { AppComponent } from './app.component';
import { NavComponent } from './nav-bar/nav/nav.component';
import { LoginStateComponent } from './nav-bar/login-state/login-    
state.component';
import { LoginComponent } from './person-center/login/login.component';
import { RegistComponent } from './person-center/regist/regist.component';
import { IndexComponent } from './index/index.component';
import { SearchListComponent } from './search/search-list/search-   
list.component';

@NgModule({
declarations: [
AppComponent,
NavComponent,
LoginStateComponent,
LoginComponent,
RegistComponent,
IndexComponent,
SearchListComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule    //路由必须在最底下

 ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

---

当路径为空或者为index时候都是会使用indexComponent组件的，这时就会把index组件充当为首页
{
path: 'index',
component: IndexComponent
},

image.png

---