Angular 4单页应用友好URL路由配置实现方案咨询

没问题，这其实是Angular路由里很常见的需求，结合你提到的PathLocationStrategy和简单的路由配置就能快速实现，我给你一步步拆解：

1. 移除URL中的哈希（启用PathLocationStrategy） #

Angular默认用HashLocationStrategy（就是你现在看到的带#的URL），要切换到路径模式，只需要两步：

• 首先确保你的index.html头部有正确的<base href="/">标签，这是路径路由的基础，用来告诉Angular应用的根路径。
• 然后在AppModule的providers数组里手动配置PathLocationStrategy：

import { LocationStrategy, PathLocationStrategy } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 导入模块 */],
  providers: [
    { provide: LocationStrategy, useClass: PathLocationStrategy }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

这一步做完，你的URL就会去掉#，变成www.abc.com/x这类格式了。

2. 配置带fancyname前缀的路由 #

要实现www.abc.com/fancyname/x、/fancyname/y这类路径，用子路由是最简洁易维护的方式，而且配置一点都不复杂，完全不用怕时间不够：
在你的路由配置文件（通常是app-routing.module.ts）里，把x、y、z组件作为fancyname路径的子路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { XComponent } from './x/x.component';
import { YComponent } from './y/y.component';
import { ZComponent } from './z/z.component';

const routes: Routes = [
  {
    path: 'fancyname', // 前缀路径
    children: [
      { path: 'x', component: XComponent },
      { path: 'y', component: YComponent },
      { path: 'z', component: ZComponent },
      // 可选：如果用户访问/fancyname时想默认跳转到x页面
      { path: '', redirectTo: 'x', pathMatch: 'full' }
    ]
  },
  // 其他根路由配置（比如首页、404页面等）
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这样配置后，访问/fancyname/x就会加载XComponent，完全符合营销部门的要求。

3. 服务器端关键配置（必做！） #

用PathLocationStrategy有个容易踩坑的点：当用户直接刷新页面或者在地址栏输入完整URL时，服务器会找不到对应的文件（因为这些路径都是Angular路由管理的，不是真实的文件路径），所以必须配置服务器把所有非静态文件的请求转发到index.html。

举几个常见服务器的配置示例：

• Apache：在项目根目录创建.htaccess文件，添加以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

• Nginx：在你的站点配置的location块中添加：

location / {
  try_files $uri $uri/ /index.html;
}

• IIS：通过IIS管理器配置URL重写规则，将所有非文件/目录的请求重定向到index.html。

最后验证 #

做完以上三步，你就可以测试：

1. 访问www.abc.com/fancyname/x，应该能正常加载X组件，URL没有#
2. 刷新页面，页面能正常加载不会出现404
3. 用Angular的routerLink跳转时，URL也会保持这种格式

内容的提问来源于stack exchange，提问作者Jyotirmoy Pan