Angular路由

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

路由

安装路由

单页面应用程序中，我们要使用路由，路由也是一个模块，我们可以直接安装

由于路由是一个特殊的模块，所以安装的时候要添加--routing 参数

在路由中，为了访问组件方便。我们可以将路由配置文件放在根目录下，此时添加 --flat参数

创建路由模块指令

ng g module --routing --flat app

创建时候，提示是否将原来的app-module覆盖，

如果开发过，不要覆盖，选择n

此时跳过对app-module的更新了，因此后面我们还要配置全局模块

如果是新项目，可以覆盖，选择y

使用路由

使用路由分成六步

第一步 在全局模块中，配置路由模块

第二步 定义页面组件

第三步 在路由配置中，引入页面组件

第四步 定义路由规则，类似vue，是一个数组，每一个成员代表一条规则

path 表示路由规则（不要以/开头）

component 定义渲染的组件

name 路由规则名称

第五步 定义路由渲染位置

vue：通过router-view

react：通过Switch

ng6中，通过router-outlet组件定义路由的渲染位置

第六步 配置根路由，

默认创建的是子路由，想变成根路由，要将forChild改成forRoot即可

ng6中，默认是browser路由策略，通过更改path实现的，需要后端的配置

我们常用hash路由策略，只需要为forRoot或者forChild传递第二个配置参数，

userHash: true

默认路由

vue中通过path匹配*定义默认路由

ng6中通过path匹配**定义默认路由

重定向路由

vue中通过redirect属性，配置重定向路由

ng6中通过redirectTo属性，配置重定向路由

注意：默认路由要放在最后面。

举例：

imports: [
    BrowserModule,
    // 1 引入路由模块
    AppRoutingModule
],
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
// 3 引入页面组件
// ts语法，支持解构的时候，为属性起别名
import { HomeComponent as Home } from './pages/home/home.component';
import { ListComponent as List } from './pages/list/list.component';
import { DetailComponent } from './pages/detail/detail.component';

// 4 定义路由规则
const routes: Routes = [
    // 首页
    { path: 'home', component: Home },
    // 列表页
    { path: 'list/:id', component: List },
    // 详情页
    { path: 'detail/:id', component: DetailComponent },
    // 输入ickt进入详情页
    { path: 'ickt', redirectTo: 'detail/ickt' },
    // 默认路由
    { path: '**', component: Home }
];
@NgModule({
    // 更改配置
    // 更改路由策略，使用hash策略
    imports: [RouterModule.forRoot(routes, { useHash: true })],
    exports: [RouterModule]
})
export class AppRoutingModule { }