AngularJS все косые черты в URL изменены на %2F

у меня огромная проблема с маршрутизацией 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, Не используя первый / (ie href="#/album/{{album.id}}") Запуск приложения в Homestead localhost (linux vagrant машина Laravel) вместо localhost на Windows 10

любая помощь была бы очень признательна!

46
angularjs angularjs-1.6 href laravel

6 ответов

%2F это процент-кодирование для косой черты/ символ.

эта проблема связана с тем, что AngularJS 1.6 изменил значение по умолчанию для URL-адресов hash-bang в $location сервис.

чтобы вернуться к предыдущему поведению:

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

дополнительные сведения см. В разделе Итак: angularjs 1.6.0 (последнее сейчас) маршруты не работают.

76

самое простое решение-добавить ! к URL-адресам на стороне клиента (если вы не используете режим HTML5, что вы, вероятно, делаете, если вы здесь).

на стороне клиента обновите URL-адреса следующим образом:

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

и так как вы держите #, есть нет проблема конфликта с маршрутизацией на стороне сервера. Все счастливы.

22

немного поздно на вечеринку, но добавление'! в ваших ссылках будет работать нормально. Меня это тоже немного беспокоило. Это изменение в последнем AngularJS 1.6.x и я где-то читал, что Google требует Спа, чтобы иметь это! после хэш. В результате мои маршруты выглядят так, как должны, но моя навигация гарантирует, что я добавлю"! в моих ссылках. Например:

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

надеюсь, это вам поможет.

С уважением!

8

для меня, я решил проблему :

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/

надеюсь, что это поможет.

3

шифрование косой черты можно отключить:

$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

2

удалите символ хэша из ссылки, так как вы используете html5mode вам не нужен символ хэша для маршрутизации

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

становится 

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