AngularJS：URL中的所有斜杠都变成了%2F

Question

我在使用AngularJS路由方面遇到了一个严重的问题。

直到最近，以下路由一直运作正常：

$routeProvider.when('/album/:albumId', {
    controller: 'albumPageController',
    templateUrl: 'views/album.html'
});

并且使用 href：

<a href="/#/album/{{album.id}}">Link</a>

然而，现在所有的斜杠都被编码为%2F。

因此，当我点击链接或在浏览器中键入localhost:8000/#/album/1时，URL会更改为：

http://localhost:8000/#%2Falbum%2F1

我已经尝试了几种方法来纠正这个问题：

使用ng-href而不是href，不使用第一个斜杠（例如href="#/album/{{album.id}}"），在Homestead本地主机上运行应用程序（Laravel的Linux虚拟机）而不是在Windows 10上的localhost上运行。

如有帮助，将不胜感激！

- MC123

---

我也尝试在href（和ng-href）中使用完整的URL，但没有任何变化。 - MC123

你在使用html5mode吗？ - Umer Z

$locationProvider.html5Mode({ enabled: true, requireBase: false }); - MC123

可能是[angularjs 1.6.0（最新版本）路由不起作用]的重复问题（https://dev59.com/jVgR5IYBdhLWcg3whtqk）。 - georgeawg

可能是Angular 1.6中使用URL哈希Bang (#!/)前缀而非简单哈希 (#/)的重复问题。 - Mistalis

Answer 1

%2F是正斜杠字符/的百分号编码。

这个问题与AngularJS 1.6在$location服务中更改哈希-感叹号URL的默认设置有关。

要恢复到以前的行为：

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

更多信息请参见SO：angularjs 1.6.0（最新版本）路由不工作。

- georgeawg

---

我已经查看了几个关于这个问题的线程，这似乎是唯一的答案。 - Rick

Answer 2

最简单的解决方案是在客户端URL后添加 !（如果没有使用HTML5模式，您可能正在使用这种方式）。

在客户端更新URL，可以如下操作:

#/foo/bar > #!/foo/bar

由于保留了 #, 所以不会出现与服务端路由冲突的问题。大家都开心。

- Overdrivr

---

谢谢！这个方法对我有用，但是“！”到底是干什么的？ - Francisco Romero

!#（先前仅为＃）是由Angular定义的一种约定，用于区分服务器端路由和客户端路由。例如，从这个地址开始foo.com/app#!/home，如果您转到URLfoo.com/app#!/profile，您将不会看到页面重新加载。这是因为Angular应用程序（在浏览器中运行，因此客户端）将从＃！之后的“主页”更新内容到“配置文件”页面，因为您已更改了URL。相反，如果您转到foo.com/otherstuff，那么您将位于＃！之前，因此您将请求服务器获取新页面otherstuff。 - Overdrivr

Answer 3

有点晚，但在您的URL后面添加'!'也能正常工作。这让我有点困扰。这是最新的AngularJS 1.6.x中的变化，我在某个地方读到Google要求单页应用程序在哈希后加上'!'。因此，我的路由看起来正常，但我的导航确保在引用中添加'!'。例如：

<ul>
    <li><a href="#!/">Home</a></li>
    <li><a href="#!/page2">Page 2</a></li>
    <li><a href="#!/page3">Page 3</a></li>
    <li><a href="#!/page4">Page 4</a></li>
</ul>

希望这能对你有所帮助。

祝好！

- realnsleo

---

我一直在遵循其他建议，其中提到使用#/page2。感谢！ - Sunil Johnson

Answer 4

对于我来说，我解决了这个问题:

app.config(function($locationProvider) {

$locationProvider.hashPrefix('');
$locationProvider.html5Mode({
    enabled: false,
    requireBase: true
  });
});

<a href="#/mylink/"> <span>MyLink</span></a>

这个链接为：

http://blablabla.co:8888/blabla#/mylink/

希望这能帮到您。

- Nizardinho

Answer 5

斜杠编码可以禁用：

$urlMatcherFactoryProvider.type('SlashFix', {
  raw:    true,
});


$stateProvider
      .state('content',{
       url: '/{slug:SlashFix}'
       ...

      })

根据此处描述，需要解决在使用Angular UI Router时将斜杠替换为2F的问题。

- Igor Simic

Answer 6

移除链接中的井号，因为你正在使用html5模式，所以不需要使用井号进行路由

<a href="/#/album/{{album.id}}">Link</a>

变成

<a href="/album/{{album.id}}">Link</a>

- Umer Z

---

刚试了一下 - 技术上解决了不编码斜杠的问题，但归根结底我需要那个#（否则Laravel将处理路由/album/1并给出404错误，因为它是一个SPA）。 - MC123

你可以尝试使用#，但将html5mode设置为false并将requireBase设置为true吗？ - Umer Z