浅谈Angular中如何使用路由？

angular中如何使用路由？本篇文章就来带大家了解一下angular中使用路由的方法，快速入门angular路由，希望对大家有所帮助！

路由的概念在前端的框架中得到了广泛的应用,对于路由的感念不做阐述,路由的应用无外乎就是嵌套、传参，高级一些的功能如懒加载、预加载，再高级一些的如：路由守卫等。本篇我们就一起来看一看在Angular中如何使用路由。【相关教程推荐：《angular教程》】

请按照图中结构来创建我们的项目

创建项目&一级模块：

• ng new angular-router-sample

• ng g c pages/login

• ng g c pages/home

• ng g c pages/mine

注：通过cli创建的组件会进行自动注册。

起步

1. 在App的html模板中配置

配置路由跳转&路由出口（router-outlet）

  登陆｜
  首页｜
  我的

2. 在App的app-routing中配置路由器

• 一个最简单的组件路由必备一个path（路由的Url）属性和一个component（Url对应加载的组件）属性：

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'mine',
    component: MineComponent,
  },
];

• 当我们意外访问了一个不存在的Url的时候我们的404页面怎么配置？

path支持一个特殊的通配符来支持“**”，当在路由表中没有成功匹配的情况下会最后指向通配符对应的组件

const routes: Routes = [
  ...
  {
    path: '**',
    component: NotFountComponent,
  },
];

注意：路由器匹配策略为先到先得，故不具体的路由配置靠后配置。

3. 设置有效的默认路由

由于我们项目默认启动后无具体路由匹配这样并不友好，我们需要设置一个有效的默认路由来展示给用户。

• 配置的默认路由应该在通配路由之上。

const routes: Routes = [
  ...
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  ...
];

配置子模块&子路由

此时我们的路由配置全部app-routing，这样对于简单的应用当然是可行的，但是随着应用的迭代、模块的增加显然配置在一起对于管理和扩展都是一项挑战，模块的拆分就成来必然。

1. 为Home组件增加带路由的模块配置

通过cli为Home组件创建带路由的模块配置: ng generate module pages/home/home --module app --flat --routing

imports: [
    BrowserModule,
    HomeRoutingModule,
    AppRoutingModule,
]

注：用cli创建的模块会自动配置到根模块，但我们手动的调整一下顺序将AppRoutingModule移动到最后，满足先到先得的策略。

2. 将Home组件的路由配置转移到home-routing

const routes: Routes = [{
  path: 'home',
  component: HomeComponent,
}];

注：配置好后就可以把app-routing 中的Home组件配置移除了。

3. 补充Home组模块的子组件并配置子路由

• 执行一下命令创建子组件

  • ng g c pages/home/children/user-list

  • ng g c pages/home/children/user-detail

  • ng g c pages/home/children/edit-user

• 为Home路由器配置增加children属性来配置子组件路由

const routes: Routes = [{
  ...
  children: [
    {
      path: 'list',
      component: UserListComponent,
    },
    {
      path: 'detail',
      component: UserDetailComponent,
    },
    {
      path: 'edit',
      component: EditUserComponent,
    },
    {
      path: '',
      redirectTo: '/home/list',
      pathMatch: 'full'
    }
  ]
}];

• 同根组件一样配置子模块路由出口

  列表｜
  编辑｜
  详情

路由传参

1. 在路由定义时配置需要携带的参数令牌

• 格式: 在路由配置的path后补充格式为/:key的令牌占位

{
  path: 'detail/:id',
  component: UserDetailComponent
}

注：这种将令牌插入到路由path中进行占位的方式中id是必须携带的参数。

• 通过routerLink携带参数

  

  Endel.io

  Endel是一款可以创造个性化舒缓声音的应用程序，可帮助您集中注意力、放松身心和入睡。

  下载

• 在Angular获取路由参数需要用到ActivatedRoute:

this.route.paramMap.subscribe(
  (params: ParamMap) => {
    console.log('id :>> ', params.get('id'));
  }
)

const id = this.route.snapshot.paramMap.get('id')!;

this.router.navigate(['/home/list']);

this.router.navigate(['/home/list', { id: this.userId, name: this.userName }]);

{
    path: 'home',
    loadChildren: () =>
      import('./pages/home/home.module').then((m) => m.HomeModule),
}

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  children: [
    ...
  ]
}];

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SelectivePreloadingStrategyService implements PreloadingStrategy {
  preloadedModules: string[] = [];

  preload(route: Route, fn: () => Observable): Observable {
    // 通过检查路由配置来决定是否做预加载
    if (route.data && route.data.preload && route.path != null) {
      // 参数1: 要加载的路由
      this.preloadedModules.push(route.path);
      // 参数2: 加载器
      return fn();
    } else {
      return of(null);
    }
  }
}

更多编程相关知识，请访问：编程入门！！