1.简介
当我们使用angular做项目的时候，本身是一个单页面应用，其实就是通过众多的组件进行切换，想要什么切换成什么样的功能组件。那这么多组件是如何切换的呢？也就是所说的页面跳转，这就使用到了路由，路由的主要作用就是控制页面的切换。
2.项目布局
一个angular项目的开始都需要做好布局。思考：一个页面上通常会有的东西，无非就是nav头部导航，主题内容，底部导航。头部导航又可以拆分成两个组件，用作首页跳转以及登录。再就是有一些页面比如说是个人中心，有多级导航，这里就可以做成二级路由，也相当于做了一个新的的项目。
3.看代码
嘴上说不清楚，直接看看代码
首先网站入口都是一个index页面，angular项目也是。
image.png
1）首先看index.html
导入bootstrap，使用初始组件：
<body>
<app-root></app-root>
</body>
2）接下来进入组件<app-root></app-root>
组件名是在ts组件中声明的，找到之后就会指向html文件，在
app.component.html中：
<!--路由的容器-->
<router-outlet></router-outlet>
<div class="row">
<div class="col-md-12" style="background: gray;height: 80px">
</div>
</div>
这里使用到了路由的容器，以及放入了一个底部导航栏，因为底部导航栏都是一样的，所以就直接放到了，路由容器的下方。 通过路由容器会接着去找路由
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
网友评论