Angular9 <base href>

2020-07-08 13:45 更新

路由器使用浏览器的 history.pushState API 进行导航。借助 pushState 你自定义应用中的 URL 路径 "localhost:4200/crisis-center",应用内的 URL 和服务器的 URL 没有区别。

现代的 HTML5 浏览器都支持 pushState,这也就是为什么很多人把这种 URL 形式称为 "HTML 5" 风格的 URL。

路由器默认使用 HTML5 风格的导航。 在 LocationStrategy 与浏览器 URL 风格部分,你可以了解为何推荐使用 HTML5 风格的 URL,如何调整其行为,以及必要时如何切换到老式的 hash(#)风格。

你必须在应用的 "index.html" 中添加一个 <base href> 元素才能让 pushState 路由正常工作。 浏览器要用 <base href> 的值为引用 CSS、脚本和图片文件时使用的相对 URL 添加前缀。

请把 <base> 元素添加在 <head> 标签的紧后面。如果应用的根目录是 "app" 目录,那么就可以像这个应用程序一样,设置 "index.html" 中的 href 值。代码如下。

Path:"src/index.html (base-href)" 。

<base href="/">

HTML5 网址和 <base href>

由于路由器默认使用 “HTML 5 pushState” 风格,所以你必须用一个 <base href> 来配置该策略(Strategy)。

配置该策略的首选方式是往 "index.html" 的 <head> 中添加一个 <base href> element标签。

Path:"src/index.html (base-href)" 。

<base href="/">

如果没有该标记,浏览器就可能无法在“深度链接”进入应用时加载资源(图片,CSS,脚本)。

有些开发人员可能无法添加 <base> 元素,这可能是因为它们没有访问 <head> 或 "index.html" 的权限。

它们仍然可以使用 HTML 5 格式的 URL,但要采取如下步骤进行补救:

用适当的[APP_BASE_HREF][]值提供(provide)路由器。

对所有 Web 资源使用绝对地址:CSS、图片、脚本、模板 HTML。

HashLocationStrategy

你可以在根模块的 RouterModule.forRoot() 的第二个参数中传入一个带有 useHash: true 的对象,以回到基于 HashLocationStrategy 的传统方式。

Path:"src/app/app.module.ts (hash URL strategy)" 。

import { 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 './page-not-found/page-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 { }
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号