Angular 5路由通过routerLink正常，修改浏览器URL时失效求助

嘿，我太懂你遇到的这个坑了——Angular作为单页应用（SPA），用routerLink内部导航没问题，但刷新或直接输URL就炸，本质就是服务器搞不懂这些客户端路由路径，我给你一步步捋清楚解决方案：

问题根源 #

用routerLink导航时，是Angular在浏览器内部完成跳转，不会给服务器发请求；但刷新页面或直接输入URL时，浏览器会直接向Wamp的Apache服务器请求这个路径（比如http://clientpackages/user），可服务器上根本没有user这个实际文件或目录，自然就返回异常了。

解决方案（针对Wamp的Apache环境） #

1. 开启Apache的rewrite模块

首先得确保Apache的URL重写功能是打开的：

• 打开Wamp管理面板，点击顶部的Apache菜单
• 鼠标悬停到Apache Modules，找到并勾选rewrite_module
• 重启Wamp服务让配置生效

2. 创建.htaccess文件实现路由重定向

在你的Angular项目根目录（也就是http://clientpackages指向的本地目录）里新建一个.htaccess文件，把下面的规则复制进去：

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

这个规则的作用很简单：所有不存在的文件/目录请求，都会被重定向到index.html，让Angular的客户端路由来接手处理。

3. 确认Angular的路由配置

检查你的AppModule里的路由设置，确保是HTML5模式（如果之前没配置的话）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的组件

const routes: Routes = [
  // 你的路由配置内容
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })], // useHash设为false就是HTML5模式
  exports: [RouterModule]
})
export class AppRoutingModule { }

同时要确认index.html里有正确的<base>标签：

<base href="/">

这个标签是告诉Angular路由的基准路径，避免跳转时出现路径混乱。

做完这些步骤后重启Wamp服务，再试试刷新页面或直接输入URL，应该就能正常访问了。

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