路由配置

简介

在单页面应用中，你可以通过显示或隐藏特定组件的显示部分来改变用户能看到的内容，而不用去服务器获取新页面。当用户执行应用任务时，他们要在你预定义的不同视图之间移动。在项目中我们使用的是 Angular 的 Router

项目中路由组织方式说明

配置根路由模块

app-routing.module.ts 文件中为系统根路由配置文件, 其他的路由文件以懒加载的方式配置到根路由中，路由采用 Hash 路由的方式

示例代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AuthGuard } from './store';

const routes: Routes = [
  { path: '', loadChildren: () => import('./modules/nav/nav.module').then(mod => mod.AppNavModule), canActivate: [AuthGuard] },
  { path: 'login', loadChildren: () => import('./modules/login/login.module').then(m => m.LoginModule) }
];

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

配置业务子路由模块

其他业务模块的路由包括其子路由定义到对应的业务模块所在的文件夹，可以直接在 .module.ts 中配置，也可以单独提取成一个单独的 -routing.module文件后引用到*.module.ts文件中

示例如下：

直接定义在 *.module.ts中

// demo.module.ts

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: '', component: DemoComponent },
      {
        path: ':demoId',
        data: { title: 'Demo-编辑' },
        resolve: {
          roles: DemoEditResolve
        },
        component: DemoEditComponent
      }
    ]),
    // ...
  ],
  declarations: [DemoComponent, DemoEditComponent],
  providers: [DemoEditResolve]
})
export class DemoModule { }

单独提取成一个单独的 -routing.module文件后引用到 .module.ts文件中

// demo-routing.module.ts

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const DemoRoutes: Routes = [
      { path: '', component: DemoComponent },
      {
        path: ':demoId',
        data: { title: 'Demo-编辑' },
        resolve: {
          roles: DemoEditResolve
        },
        component: DemoEditComponent
      }
    ];

@NgModule({
  imports: [
    RouterModule.forChild(DemoRoutes)
  ]
  exports: [RouterModule],
  providers: []
})
export class DemoRoutingModule { }

// demo.module.ts

import { DemoRoutingModule } from './demo-routing.module.ts';

@NgModule({
  imports: [
    DemoRoutingModule
    // ...
  ],
  declarations: [DemoComponent, DemoEditComponent],
  providers: [DemoEditResolve]
})
export class DemoModule { }

将路由转换为菜单/面包屑数据

/src/app/modules/nav 组件中需要配置菜单和导航所以 nav.module.ts 需要包含后续子页面的路由配置信息, 并使用依赖的注入注入路由配置信息

// nav.module.ts

import { LOGS_ROUTES } from './logs-routes';

export const ROUTES = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    data: { title: '首页', icon: 'dashboard' },
    loadChildren: () => import('../dashboard/dashboard.module').then(mod => mod.DashboardModule)
  },
  {
    path: 'logs',
    data: { title: '日志管理', icon: 'reconciliation'},
    children: LOGS_ROUTES
  },
  // ...
];

@NgModule({
  imports: [
    RouterModule.forChild([
      { path: '', component: AppNavComponent, children: ROUTES },
    ]),
    // ...
  ],
  declarations: [AppNavComponent],
  exports: [AppNavComponent],
  providers: [
    {
      provide: NAV_MENUS,
      useValue: resolveRouteMenus(ROUTES), // 注入菜单依赖数据
    },
    {
      provide: NT_NAV_CONFIG,
      useValue: {
        routes: ROUTES, // 注入面包屑依赖数据
        baseUrl: '/'
      }
    }
    // ...
  ],
})
export class AppNavModule { }

路由命名和持久化规则

菜单路由

菜单的定义中包含菜单（menu）和菜单项（menu item）2 种实体。菜单是菜单项的分类，菜单项则负责连接具体页面。 XXX

设置
  |-店铺设置
    |-门店地址
    |-员工管理
  |-通用设置

设置-通用设置，menu/:menu-item，/setting/general
设置-店铺设置-门店地址，menu/:menu/:menu-item，/setting/store/address

默认路由

当菜单被激活时需直接路由到指定的菜单项，通常是该菜单下的第一个菜单项。

/setting 路由到 /setting/general
/setting/store 路由到 /setting/store/address

页面路由

实体管理（增、删、改、査）相关页面的路由规则。此规则通常运用于运营管理后台

规范

多个单词之间用 - 分隔，如wiki模版：wiki-template
路由中同一资源的不同状态用 Query 参数表述，如 /messages?status=read /messages?status=unread

消息
  |-全部 /messages
  |-未读消息 /messages?status=unread
  |-已读消息 /messages?status=read

路由中不同资源用不同路径表述，简历中的职历 /resumes/BNZD9LXCMMTEDIYW/career

实体管理页面路由（增删改査）

列表页面 :entities，示例：/users
详情页面 :entities/:id/detail，示例：/users/BNZD9LXCMMTEDIYW/detail
新建页面 :entities/create，示例：/users/create
编辑页面 :entities/:id，示例：/users/BNZD9LXCMMTEDIYW/edit
列表页面中页卡 :entities/:tab：/users?type=disabled 无效用户页卡
编辑页面中页卡 :entities/:id/:tab，示例：/users/BNZD9LXCMMTEDIYW/career
详情页面中页卡 :entities/:id/detail/:tab，示例：/users/BNZD9LXCMMTEDIYW/detail/career

业务页面路由

账户总览 account/home
账户充值 account/recharge

其他页面路由系统中还有其他各种各样的页面，这些页面基本可归为 2 类：展示性页面和操作性页面。展示型的路由路径用名字来呈现，操纵型页面通过动词来呈现。

类型	示例
系统帮助页面	`/document/110015`
控制台页面	`/dashboard`
账户充值页面	`/account/recharge`

简介​

项目中路由组织方式说明​

配置根路由模块​

配置业务子路由模块​

将路由转换为菜单/面包屑数据​

路由命名和持久化规则​

菜单路由​

页面路由​

简介