AngularJS URL 中的所有斜线更改为 %2F

Question

我在 AngularJS 路由方面遇到了很大的问题。

直到最近，以下路线一切正常：

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

并使用 href:

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

但是，现在所有的斜杠都被编码成 %2F。

因此，当我单击 link，或在浏览器中键入 localhost:8000/#/album/1 时，URL 将更改为：

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

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

使用 ng-href 代替 href，不使用第一个/（即href="#/album/{{album.id}}"）运行 Homestead 本地主机（Laravel 的 linux 流浪机器）中的应用程序而不是 Windows 10

上的本地主机

如有任何帮助，我们将不胜感激！

Answer 1

从 link 中删除散列符号，因为您使用的是 html5 模式，所以路由不需要散列符号

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

变成

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

Answer 2

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

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

要恢复到以前的行为：

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

有关详细信息，请参阅。

Answer 3

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

客户端，像这样更新 URLS：

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

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

Answer 4

晚会有点晚了，但添加了一个“！”到你的网址就可以了。这也让我有些困扰。这是最新 AngularJS 1.6.x 中的一个更改，我在某处读到 Google 要求 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 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

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

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/

希望对您有所帮助。

AngularJS URL 中的所有斜线更改为 %2F

AngularJS All slashes in URL changed to %2F

href

laravel

angularjs

angularjs-1.6