55

我在使用 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

任何帮助将非常感激！

4

6 回答 6

95

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

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

要恢复到以前的行为：

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

有关更多信息，请参阅SO：angularjs 1.6.0 (late now) routes not working。

于 2016-12-21T23:03:58.037 回答
26

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

客户端，像这样更新 URL：

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

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

于 2017-03-10T07:36:19.047 回答
10

聚会有点晚了，但加了一个“！” 到您的 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>

我希望这可以帮助你。

问候！

于 2017-03-29T11:57:41.400 回答
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/

希望这有帮助。

于 2017-06-15T20:28:12.750 回答
2

可以禁用斜线编码：

$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

于 2017-04-21T03:36:22.717 回答
0

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

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

变成

<a href="/album/{{album.id}}">Link</a>
于 2016-12-21T21:54:49.827 回答