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://本地主机:8000 /#%2Falbum%2F1

我已经尝试了几件事来纠正这个问题:

使用ng-href代替href,不使用第一个/(即href="#/album/{{album.id}}")在Homestead localhost(Laravel的linux vagrant机器)中运行应用程序而不是Windows 10上的localhost

任何帮助将非常感激!

Answer 1

%2F是正斜杠字符的百分比编码/.

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

要恢复到以前的行为:

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

有关更多信息,请参阅SO:angularjs 1.6.0(最新版本)路由无法正常工作.

Answer 2

最简单的解决方案是添加一个!客户端URL(如果不使用HTML5模式,如果你在这里,你可能会这样做).

客户端,更新URL如下:

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

并且由于您保留了#,因此不存在与服务器端路由冲突的问题.大家都开心.

Answer 3

派对有点晚,但加了'!' 您的网址将正常工作.这也让我感到困扰.这是最新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 4

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

app.config(function($locationProvider) {

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

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

哪个给:http://blablabla.co:8888 /lablab#/ mylink /

希望这有帮助.