AngularJS路由删除符号的方法有哪些？

AngularJS 作为一款经典的 JavaScript 前端框架，其路由功能（ngRoute）在单页面应用（SPA）开发中扮演着重要角色，默认情况下，AngularJS 路由会在 URL 中添加 符号（如 http://example.com/#/home），这既不符合 RESTful 风格，也可能影响 URL 的美观和 SEO 效果，本文将深入探讨 AngularJS 路由删除 符号的多种解决方案，分析其原理、适用场景及注意事项,帮助开发者根据项目需求选择最合适的实现方式。

理解 AngularJS 路由中 符号的成因

在 AngularJS 中， 符号的出现源于其基于哈希（Hash）的路由机制，浏览器中的哈希值（ 后面的内容）不会被发送到服务器，AngularJS 可以通过监听哈希值的变化来控制视图切换，而无需刷新页面，这种机制的优势在于兼容性极强，即使在旧版浏览器中也能正常运行，且无需服务器额外配置，但随着现代 Web 应用对 URL 规范性的要求提高，去除 符号的需求日益迫切。

去除 符号的核心方案：HTML5 History 模式

AngularJS 提供了 html5Mode 配置项，通过启用 HTML5 History 模式（又称“无哈希模式”），可以将路由 URL 转换为符合 RESTful 规范的形式（如 http://example.com/home），其核心原理是利用 HTML5 History API 的 pushState 和 replaceState 方法，实现前端路由的跳转，同时通过服务器配置确保所有路由请求都能正确返回应用的入口文件（如 index.html）。

启用 html5Mode 的基本配置

在 AngularJS 应用中，需通过 $locationProvider 启用 html5Mode，并配置 linkRelSuffix（可选，用于处理 <a> 标签的 rel="noopener" 属性）,示例如下：

angular.module('myApp', ['ngRoute'])
  .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutController'
      })
      .otherwise({
        redirectTo: '/home'
      });
    // 启用 HTML5 History 模式
    $locationProvider.html5Mode(true);
  }]);

配置完成后，前端路由 URL 将不再包含 符号，但此时直接访问 http://example.com/home 或刷新页面，可能会因服务器未配置导致 404 错误,因此服务器端配置是必不可少的环节。

服务器端配置：确保路由可访问性

启用 HTML5 History 模式后，服务器需要将所有非静态资源的路由请求重定向到 index.html，否则浏览器直接访问子路由（如 /about）时，服务器会尝试查找对应的物理文件，从而返回 404 错误,以下是常见服务器的配置示例：

（1）Nginx 配置

在 Nginx 的 server 块中添加以下规则：

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

该配置会依次检查请求的 URL 是否存在对应文件或目录，若不存在则重定向到 index.html，确保 AngularJS 路由能够正确处理。

（2）Apache 配置

在 Apache 的 .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>

通过 mod_rewrite 模块实现路由重定向，逻辑与 Nginx 类似。

（3）Node.js（Express）配置

使用 Express 框架时,可通过以下中间件实现：

const history = require('connect-history-api-fallback');
app.use(history());

connect-history-api-fallback 是专门用于处理 HTML5 History 模式的中间件，会自动将未匹配的路径重定向到 index.html。

html5Mode 的注意事项与兼容性处理

启用 html5Mode 后，仍需注意以下问题,以确保应用的稳定性和兼容性：

基础 URL（baseHref）的配置

当 AngularJS 应用部署在子目录时（如 http://example.com/my-app/），需通过 <base> 标签或 $locationProvider 的 baseHref 配置指定基础路径。

<base href="/my-app/">

或在配置中添加：

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false // 可选，若未设置 <base> 标签，需设置为 false
});

<a> 标签的处理

默认情况下，AngularJS 会自动拦截带有 ng-href 或 href 属性且以 开头的 <a> 标签，防止页面跳转，但在 html5Mode 下，需确保所有内部链接的 href 属性以 开头，或使用 ng-href 指令。

<!-- 正确 -->
<a href="/home" ng-href="/home">首页</a>
<!-- 错误：可能导致页面刷新 -->
<a href="#/home">首页</a>

兼容性降级方案

对于不支持 HTML5 History API 的旧浏览器（如 IE9 及以下），AngularJS 会自动回退到哈希模式，但需确保应用在降级后仍能正常工作，必要时可通过 Modernizr 等库检测浏览器能力,提供备用路由逻辑。

不同场景下的方案选择

AngularJS 路由去除 符号的核心在于启用 html5Mode 并配合服务器端配置，通过 HTML5 History API 实现无刷新路由跳转，虽然这一方案会增加一定的配置复杂度，但能显著提升 URL 的规范性和用户体验，尤其对 SEO 友好，在实际开发中，需根据项目需求、兼容性要求及部署环境选择合适的方案，并注意处理基础 URL、链接拦截等细节问题，通过合理配置，AngularJS 应用同样可以实现现代化的路由效果,为用户提供流畅的单页面应用体验。