AngularJS路由跳转时URL自动添加#%2F导致无法跳转的问题求助

从你的代码来看，导致URL出现#%2F（斜杠被URL编码后的结果）无法正常跳转的原因主要有两个，我一步步帮你修复：

1. 修正导航链接的路径错误 #

先看你navigation.html里的用户管理链接：

<a ng-href="#/usermanagement.html">

这里你额外加了.html后缀，但你的路由配置里对应的路径是/usermanagement——AngularJS路由的路径不需要带文件后缀，这个不匹配会直接导致路由无法识别，进而引发URL编码异常。

修改后的用户管理导航代码：

<li>
  <a ng-href="#/usermanagement">
    <div id="regions" class="navigation-item clear-fix" >
      <div class="icon regions"></div>
      <div>
        <h2>User Management</h2>
        <span>Create New User</span>
      </div>
    </div>
  </a>
</li>

2. 检查HTML5模式的配置（关键） #

AngularJS默认用hash模式（URL带#），如果你的项目不小心开启了html5Mode但没正确配置base标签，就会出现URL编码混乱的问题。

情况1：保持默认hash模式（适配你当前的配置） #

确保你的路由配置里没有开启html5Mode，也就是不要加这段代码：

$locationProvider.html5Mode(true);

你现在的Router.js是符合要求的，不需要额外改动。

情况2：想去掉URL里的#（可选） #

如果希望URL更美观，要开启HTML5模式的话，需要两步操作：

• 在index.html的<head>标签里添加base标签：

<base href="/">

• 修改Router.js，注入$locationProvider并开启模式：

ProcureEaseApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
  $routeProvider.
  when('/dashboard', {
    templateUrl: 'views/dashboard.html',
    controller: 'DashboardController',
    caseInsensitiveMatch: true,
  }).
  when('/usermanagement', {
    templateUrl: 'views/usermanagement.html',
    controller: 'UserManagementController',
    caseInsensitiveMatch: true,
  });

  // 开启HTML5模式
  $locationProvider.html5Mode(true);
}])

同时导航链接可以去掉#，写成：

<a ng-href="/dashboard">
<a ng-href="/usermanagement">

3. 验证路由匹配一致性 #

确保导航链接的路径和路由配置里的路径完全对应（你已经开了caseInsensitiveMatch: true，大小写不用纠结，但路径名和后缀必须统一），比如路由是/usermanagement，链接就不能写成/usermanagement.html。

按上面的步骤修改后，应该就能解决URL出现#%2F无法跳转的问题了。

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