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

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


angularjs laravel href angularjs-1.6
person MC123    schedule 21.12.2016    source источник
comment
Я также пробовал использовать полный URL-адрес в href (и ng-href), без изменений   -  person MC123    schedule 22.12.2016
comment
используете его в html5mode?   -  person Umer Z    schedule 22.12.2016
comment
$ locationProvider.html5Mode ({enabled: true, requireBase: false});   -  person MC123    schedule 22.12.2016
comment
Возможный дубликат маршрутов angularjs 1.6.0 (последний сейчас) не работает   -  person georgeawg    schedule 22.12.2016
comment
Возможный дубликат хэш-бэнг URL ( #! /) вместо простого хеша (# /) в Angular 1.6   -  person Mistalis    schedule 24.02.2017

Ответы (6)


arrow_upward
95
arrow_downward

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

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

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

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

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

person georgeawg    schedule 21.12.2016
comment
Я просмотрел несколько тем по этому поводу, и это, кажется, единственный ответ. - person Morty; 08.02.2017

arrow_upward
26
arrow_downward

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

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

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

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

person Overdrivr    schedule 10.03.2017
comment
Спасибо! У меня это сработало, но ... что именно делает !? - person Francisco Romero; 25.06.2017
comment
!# (ранее только #) - это соглашение, определенное Angular для отделения маршрутизации на стороне сервера от маршрутизации на стороне клиента. Например, начиная с этого адреса foo.com/app#!/home, если вы перейдете по URL foo.com/app#!/profile, вы не увидите перезагрузки страницы. Это приложение Angular (запущенное в вашем браузере на стороне клиента), которое обновит содержимое со страницы home до страницы profile, потому что вы изменили URL-адрес после #!. Вместо этого, если вы перейдете на foo.com/otherstuff, вы окажетесь перед #!, поэтому вы запросите сервер с новой страницей otherstuff - person Overdrivr; 29.06.2017

arrow_upward
9
arrow_downward

Немного поздно на вечеринку, но добавляю "!" к вашим 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>

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

С Уважением!

person realnsleo    schedule 29.03.2017
comment
и я следил за многими другими предложениями, в которых упоминалось использование # / page2. Спасибо за !. - person Sunil Johnson; 04.10.2017

arrow_upward
6
arrow_downward

Для меня я исправил проблему:

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/

Надеюсь на эту помощь.

person Nizardinho    schedule 15.06.2017

arrow_upward
2
arrow_downward

косую черту можно отключить:

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

person Igor Simic    schedule 21.04.2017

arrow_upward
0
arrow_downward

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

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

становится

<a href="/album/{{album.id}}">Link</a>
person Umer Z    schedule 21.12.2016
comment
Просто попробовал это - это технически решило проблему не кодирования косых черт, но в конце дня мне нужен # там (иначе Laravel обработает маршрут / альбом / 1 и выдаст 404, так как это SPA) - person MC123; 22.12.2016
comment
Можете ли вы попробовать с #, но установить для html5mode значение false, а для requireBase - значение true? - person Umer Z; 22.12.2016