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 localhost（Laravel 的 linux vagrant 机器）而不是 Windows 10 上的 localhost 中运行应用程序

任何帮助将不胜感激！

Answer 1

%2F 是正斜杠 / 字符的 percent-encoding。

这个问题与 AngularJS 1.6 更改了 $location 服务中 hash-bang url 的默认值有关。

要恢复到以前的行为：

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

如需了解更多信息，请参阅SO: angularjs 1.6.0 (latest now) routes not working。

Answer 2

最简单的解决方案是在客户端 URL 中添加 !（如果不使用 HTML5 模式，如果您在这里，您可能会这样做）。

客户端，像这样更新 URL：

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

而且由于您保留了#，因此没有与服务器端路由冲突的问题。大家开心。

Answer 3

聚会有点晚了，但加了一个“！”到您的 URL 将正常工作。这也让我有些困扰。这是最新的 AngularJS 1.6.x 中的一个变化，我在某处读到谷歌要求 SPA 有那个“！”哈希后。结果，我的路线看起来应该是这样，但我的导航确保我添加了“！”在我的参考资料中。例如：

<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>

希望对你有帮助。

问候！

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/

希望对您有所帮助。

Answer 5

斜线编码可以禁用：

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


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

      })

如此处所述https://www.coditty.com/code/angular-ui-router-replacing-slash-with-2f-quick-fix

Answer 6

从链接中删除井号，因为您使用的是 html5mode，所以路由不需要井号

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

变成

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