AngularJS Все сокращения в URL-адресе изменены на% 2F

У меня проблема с AngularJS routing.

До недавнего времени все было в порядке со следующего маршрута:

$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 machine) вместо localhost в Windows 10

Любая помощь приветствуется!

Ответы

Ответ 1

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

Эта проблема связана с тем, что AngularJS 1.6 изменил значение по умолчанию для URL-адресов хеширования в службе определения $location.

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

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

Дополнительную информацию см. В разделе SO: angularjs 1.6.0 (последние сейчас) маршруты не работают.

Ответ 2

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

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

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

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

Ответ 3

Немного поздно вечеринке, но добавив '!' к вашим URL-адресам будет работать нормально. Меня это тоже беспокоило. Это изменение в последнем 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>

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

С уважением!

Ответ 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/

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

Ответ 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

Ответ 6

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

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

становится

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