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时，该网址将更改为：

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

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

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

非常感谢任何帮助！

Answer 1

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

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

要恢复到之前的行为：

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

有关详细信息，请参阅SO: angularjs 1.6.0 (latest now) routes not working。

Answer 2

最简单的解决方案是向客户端网址添加<p id="demo"></p>（如果不使用HTML5模式，如果您在此处可能会这样做）。

客户端，像这样更新URL：

!＆gt; #/foo/bar

由于您保留了#!/foo/bar，因此没有与服务器端路由冲突的问题。大家都很开心。

Answer 3

派对有点晚了，但加了一个＆＃39;！＆＃39;您的网址将正常工作。这也让我感到困扰。这是最新AngularJS 1.6.x的一个变化，我在某处读到谷歌要求SPA有这个＆＃39;！＆＃39;哈希之后。因此，我的路线看起来应该如此，但我的导航确保我添加了＆＃39;！＆＃39;在我的参考文献中例如：

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

AngularJS URL中的所有斜杠都更改为％2F

6 个答案: