欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

angular路由的两种策略

程序员文章站 2022-10-31 15:52:01
angular路由的两种策略 通过两种locationstrategy提供商来支持所有这些风格: pathlocationstrategy- 默认的策略,支持“html 5 pushst...

angular路由的两种策略

通过两种locationstrategy提供商来支持所有这些风格:

pathlocationstrategy- 默认的策略,支持“html 5 pushstate”风格。

hashlocationstrategy- 支持“hash url”风格。

对比两种策略:link

你必须选择一种策略,并且在项目的早期就这么干。一旦该应用进入了生产阶段,要改起来可就不容易了,因为外面已经有了大量对应用 url 的引用。

几乎所有的 angular 项目都会使用默认的 html 5 风格。它生成的 url 更易于被用户理解,它也为将来做服务端渲染预留了空间。

在服务器端渲染指定的页面,是一项可以在该应用首次加载时大幅提升响应速度的技术。那些原本需要十秒甚至更长时间加载的应用,可以预先在服务端渲染好,并在少于一秒的时间内完整呈现在用户的设备上。

只有当应用的 url 看起来像是标准的 web url,中间没有 hash(#)时,这个选项才能生效。

除非你有强烈的理由不得不使用 hash 路由,否则就应该坚决使用默认的 html 5 路由风格。

hashlocationstrategy策略

hashlocationstrategy

你可以在根模块的routermodule.forroot的第二个参数中传入一个带有usehash: true的对象,以回到基于hashlocationstrategy的传统方式。

src/app/app.module.ts (hash url strategy)

content_copyimport { ngmodule } from '@angular/core';

import { browsermodule } from '@angular/platform-browser';

import { formsmodule } from '@angular/forms';

import { routes, routermodule } from '@angular/router';

import { appcomponent } from './app.component';

import { pagenotfoundcomponent } from './not-found.component';

const routes: routes = [

];

@ngmodule({

imports: [

browsermodule,

formsmodule,

routermodule.forroot(routes, { usehash: true }) // .../#/crisis-center/

],

declarations: [

appcomponent,

pagenotfoundcomponent

],

providers: [

],

bootstrap: [ appcomponent ]

})

export class appmodule { }