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 { }
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论