总结

以上是小编为你收集整理的angular当router使用userhash:false时路由404问题全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

原文地址：https://www.cnblogs.com/francis67/p/10350018.html

Angular 5.x中Router使用详解

这次给大家带来Angular 5.x中Router使用详解，Angular 5.x中Router使用的注意事项有哪些，下面就是实战案例，一起来看一下。

序言：

Angular APP 视图之间的跳转，依赖于 Router （路由），这一章，我们来讲述 Router 的应用

实例讲解

运行结果如下。 设置了3个导航栏， Home、 About、Dashboard。 点击不同的导航栏，跳转到相应的页面：

创建3个 component

1. ng g c home

2. ng g c about

3. ng g c dashboard

路由与配置

（1）**引入 Angular Router **

当用到 Angular Router 时，需要引入 RouterModule，如下：

// app.module.ts
import { RouterModule } from ''@angular/router'';
imports: [
 BrowserModule, RouterModule
],

（2） 路由配置

还记得由谁来管理component 的吧，没错，由 module 来管理。 所以，把新创建的 component，引入到 app.moudle 中。 如下：

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { RouterModule } from ''@angular/router'';
import { appRoutes } from ''./routerConfig'';
import { AppComponent } from ''./app.component'';
import { AboutComponent } from ''./components/about/about.component'';
import { HomeComponent } from ''./components/home/home.component'';
import { DashboardComponent } from ''./components/dashboard/dashboard.component'';

提示： 注意component的路径，为便于管理，我们把新创建的component 移到了 components 文件夹中。

创建 Router Configure 文件

在 app 目录下， 创建 routerConfig.ts 文件。 代码如下：

import { Routes } from ''@angular/router'';
import { HomeComponent } from ''./components/home/home.component'';
import { AboutComponent } from ''./components/about/about.component'';
import { DashboardComponent } from ''./components/dashboard/dashboard.component'';
export const appRoutes: Routes = [
 { path: ''home'', 
 component: HomeComponent 
 },
 {
 path: ''about'',
 component: AboutComponent
 },
 { path: ''dashboard'',
 component: DashboardComponent
 }
];

说明： Angular 2.X 以上版本，开始使用 TypeScript 编写代码，而不再是 JavaScript，所以，文件的后缀是： ts 而不是 js

这个 routerConfigue 文件，怎么调用呢？ 需要把它加载到 app.module.ts 中，这是因为 app.moudle.ts 是整个Angular App 的入口。

// app.module.ts
import { appRoutes } from ''./routerConfig'';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

声明 Router Outlet

在 app.component.html 文件中，添加代码：

<p>
 </p><h1>
  {{title}}!!
 </h1>
 <nav>
  <a>Home</a>
  <a>About</a>
  <a>Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 

运行

进入到该工程所在的路径， 运行；

ng serve --open

当 webpack 编译成功后，在浏览器地址栏中，输入： http://localhost:4200

即可看到本篇开始的结果。

关于Router，换一种写法：

在 app.moudle.ts 文件中，代码如下 ：

 imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: ''home'', 
   component: HomeComponent 
   },
   {
   path: ''about'',
   component: AboutComponent
   },
   {
   path: ''dashboard'',
   component: DashboardComponent
   }
  ]
  )
 ],

这样一来，可以不用单独创建 routerConfigure.ts 文件。

小结

自从引入了面向组件（component）后，路由管理相比 AngularJS （1.X），方便了很多。

进一步优化：

或许你已经注意到，当访问 http://localhost:4200 时，它的路径应该是 “/”， 我们应该设置这个默认的路径。

{
   path: '''',
   redirectTo:''/home'',
   pathMatch: ''full''
   },

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

使用JS操作input文本框内容

React Router v4使用详解

以上就是Angular 5.x中Router使用详解的详细内容，更多请关注php中文网其它相关文章！

Angular Router 框架中 DefaultUrlSerializer 的使用方法介绍

DefaultUrlSerializer 是 Angular 路由 (Router) 模块中的一个核心类，负责解析和序列化 URL。Angular 的路由系统是非常复杂且功能强大的，其设计旨在简化单页应用 (SPA) 的导航流程。而 DefaultUrlSerializer 在其中扮演着关键角色，确保 URL 能够正确地解析和序列化，从而使路由配置和导航得到顺利执行。

DefaultUrlSerializer 的基本功能

DefaultUrlSerializer 的主要职能是将 URL 字符串解析为 UrlTree，以及将 UrlTree 序列化为 URL 字符串。这两个操作分别对应 parse 和 serialize 两个方法。

• parse(url: string): UrlTree：将一个 URL 字符串解析成一个 UrlTree 对象。
• serialize(tree: UrlTree): string：将 UrlTree 对象序列化为一个 URL 字符串。

UrlTree 是 Angular 中用来表示路由树结构的对象，它包含了有关导航的所有信息，例如路径片段、查询参数、或者 URL 片段的层次结构。

使用场景

DefaultUrlSerializer 在实际开发中有多个使用场景。例如，您可能会遇到需要自定义解析 URL 或序列化 URL 的需求，比如在 URL 中进行特殊字符编码，处理复杂的查询参数，或者支持某种自定义的路由格式。在这些情况下，可以使用 DefaultUrlSerializer 进行扩展或者自定义实现。

示例解析与序列化

示例 1：基本的 URL 解析

import { DefaultUrlSerializer, UrlTree } from `@angular/router`;

const url = `/path/to/resource?query=123`;
const serializer = new DefaultUrlSerializer();

const tree: UrlTree = serializer.parse(url);
console.log(tree);

在这个示例中，我们创建了一个 DefaultUrlSerializer 实例，并解析了一个包含查询参数的 URL。解析结果中的 UrlTree 结构可以被进一步用于导航或其他操作。

示例 2：URL 序列化

import { DefaultUrlSerializer, UrlTree, PRIMARY_OUTLET } from `@angular/router`;

const serializer = new DefaultUrlSerializer();
const urlTree: UrlTree = {
  root: {
    segments: [],
    children: {
      [PRIMARY_OUTLET]: [
        { path: `path`, parameters: {} },
        { path: `to`, parameters: {} },
        { path: `resource`, parameters: {} }
      ]
    }
  },
  queryParams: { query: `123` },
  fragment: null
};

const url = serializer.serialize(urlTree);
console.log(url); // 输出: /path/to/resource?query=123

在这个示例中，我们手动构建了一个 UrlTree 对象并使用 DefaultUrlSerializer 将其序列化为字符串 URL。

自定义 DefaultUrlSerializer

如果需要实现自定义的 URL 解析和序列化逻辑，可以通过扩展 DefaultUrlSerializer 来实现。例如，如果需要对 URL 中的某些字符进行特殊处理，比如替换某些字符或者添加自定义的逻辑来解析和生成 URL。

下面展示一个简单的自定义实现：

示例 3：扩展 DefaultUrlSerializer

import { DefaultUrlSerializer, UrlTree } from `@angular/router`;

class CustomUrlSerializer extends DefaultUrlSerializer {
  // 自定义解析 URL 的逻辑
  parse(url: string): UrlTree {
    // 在这里添加自定义逻辑
    url = url.replace(/%XX/g, `XX`);
    return super.parse(url);
  }

  // 自定义序列化 URL 的逻辑
  serialize(tree: UrlTree): string {
    let url = super.serialize(tree);
    // 在这里添加自定义逻辑
    url = url.replace(/XX/g, `%XX`);
    return url;
  }
}

这个 CustomUrlSerializer 继承自 DefaultUrlSerializer，并重写了 parse 和 serialize 方法，以实现 URL 中某些字符的自定义替换。

使用自定义的 URL Serializer

要使用自定义的 URL Serializer，需要在 Angular 应用程序的提供者 (Providers) 中配置它。

示例 4：配置自定义 URL Serializer

import { NgModule } from `@angular/core`;
import { RouterModule } from `@angular/router`;
import { CustomUrlSerializer } from `./custom-url-serializer`; // 引入自定义 URL Serializer

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [
    { provide: `UrlSerializer`, useClass: CustomUrlSerializer }
  ]
})
export class AppModule {}

在这个示例中，通过 Angular DI 容器提供了自定义的 URL Serializer，从而使其在整个应用程序中生效。

深入解析 DefaultUrlSerializer

DefaultUrlSerializer 实现了一个基于正则表达式的解析器，用于从 URL 字符串中提取路径、查询参数和片段。解析的结果会被转换为 UrlTree 结构。这种设计允许 Angular 对路由URL 进行灵活的处理和优化，使开发者能够充分利用路由系统的各种功能。

以下是 DefaultUrlSerializer 的内部解析和序列化的简化版本：

示例 5：内部解析和序列化逻辑

import { Injectable } from `@angular/core`;
import { UrlTree, UrlSegment, PRIMARY_OUTLET } from `@angular/router`;

@Injectable()
export class DefaultUrlSerializer {
  parse(url: string): UrlTree {
    // 系统化和移除前后的空白字符
    const cleanedUrl = url.trim();

    // 解析路径和片段
    const urlTree = this.parseUrlTree(cleanedUrl);

    // 解析查询参数
    const queryParams = this.parseQueryParams(cleanedUrl);

    // 创建 UrlTree 对象
    const tree: UrlTree = {
      root: urlTree,
      queryParams,
      fragment: this.parseFragment(cleanedUrl)
    };

    return tree;
  }

  serialize(tree: UrlTree): string {
    const segments = this.serializeSegments(tree.root);
    const queryParams = this.serializeQueryParams(tree.queryParams);
    const fragment = tree.fragment ? `#${tree.fragment}` : '''';

    // 组合最终的 URL
    return `${segments}${queryParams}${fragment}`;
  }

  private parseUrlTree(url: string): any {
    // 省略复杂的正则解析逻辑
    return { ... };
  }

  private parseQueryParams(url: string): any {
    // 省略复杂的查询参数解析逻辑
    return { ... };
  }

  private parseFragment(url: string): string | null {
    // 省略复杂的片段解析逻辑
    return null;
  }

  private serializeSegments(tree: any): string {
    // 省略复杂的序列化逻辑
    return ''/path'';
  }

  private serializeQueryParams(queryParams: any): string {
    // 省略复杂的序列化逻辑
    return ''?query=123'';
  }
}

这个代码片段展示了 DefaultUrlSerializer 如何通过多个方法来解析和序列化 URL。虽然细节部分省略，但大致的处理流程展示了 Angular 在处理 URL 时的不同阶段和功能模块。这些方法大多基于正则表达式和字符串操作，可以处理复杂的 URL 结构，包括不同路径片段、查询参数以及 URL 片段。

结论

DefaultUrlSerializer 是 Angular 路由模块的一个核心组件，负责 URL 的解析和序列化操作。通过 DefaultUrlSerializer，Angular 可以将 URL 字符串转换为 UrlTree 对象，以及将 UrlTree 对象转换为字符串 URL。这样一来，整个路由系统得以正常运作，开发者可以灵活地配置和操作路由。

在一些特定的应用场景下，可能会需要自定义 URL 解析和序列化逻辑，比如处理特殊字符、支持自定义格式等。这时，可以通过继承 DefaultUrlSerializer 并重写 parse 和 serialize 方法来实现。此外，在应用程序的提供者配置中注入自定义的 Serializer 类以替代默认实现，使得整个应用程序能够使用自定义的 URL 处理逻辑。

利用这一套机制，可以极大地提升单页应用的导航能力，满足更加复杂和精细的需求，同时保持代码结构的清晰和可维护性。

Angular Router原生路由和Angular UI Router嵌套路由

   myApp.config(function ($stateProvider,$urlRouterProvider) {
       $stateProvider
          .state("PageTab",{
              url: "/PageTab",templateUrl: "PageTab.html"
          })
          .state("PageTab.Page1",{
              url: "/Page1",templateUrl: "Page-1.html"
          })
          .state("PageTab.Page2",{
              url: "/Page2",templateUrl: "Page-2.html"
          })
          .state("PageTab.Page3",{
              url: "/Page3",templateUrl: "Page3.html"
          });
   });

   myApp.config(function ($stateProvider,$urlRouterProvider) {
       $stateProvider
           .state('tab1',{
               name: 'tab1',url: '/tab1',template: '<div><p>Caerphilly fromage che.</p></div>'
           })
           .state('tab2',{
               name: 'tab2',url: '/tab2',template: '<div><p>AireDale hard cheese r.</p></div>'
           })
           .state('tab3',{
               name: 'tab3',url: '/tab3',template: '<div><p>Cheese and biscuits st.</p></div>'
           })
   })

angular – 对子路由的RouterLinkActive都是false

{ path: '',component: LoginSingupComponent,children: [
    { path: 'login',component: LoginComponent },{ path: 'singup',component: SingupComponent },]
},

<nav md-tab-nav-bar>
  <a md-tab-link routerLink="/login" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Entrar {{rla.isActive}}</a>
  <a md-tab-link routerLink="/singup" routerLinkActive [routerLinkActiveOptions]="{exact: true}" #rla="routerLinkActive" [active]="rla.isActive">Criar uma conta{{rla.isActive}}</a>
</nav>

<nav md-tab-nav-bar>
    <a md-tab-link [routerLink]="['/']" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a md-tab-link [routerLink]="['/login']" routerLinkActive="active">Login</a>
    <a md-tab-link [routerLink]="['/singup']" routerLinkActive="active">Signup</a>
</nav>

我们今天的关于angular当router使用userhash:false时路由404问题和angular router的分享就到这里，谢谢您的阅读，如果想了解更多关于Angular 5.x中Router使用详解、Angular Router 框架中 DefaultUrlSerializer 的使用方法介绍、Angular Router原生路由和Angular UI Router嵌套路由、angular – 对子路由的RouterLinkActive都是false的相关信息，可以在本站进行搜索。