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 изменяется на:
Я пробовал несколько вещей, чтобы исправить это:
использование ng-href вместо href,
Не используя первый / (ie href="#/album/{{album.id}}"
)
Запуск приложения в Homestead localhost (linux vagrant машина Laravel) вместо localhost на Windows 10
любая помощь была бы очень признательна!
6 ответов
%2F
это процент-кодирование для косой черты/
символ.
эта проблема связана с тем, что AngularJS 1.6 изменил значение по умолчанию для URL-адресов hash-bang в $location
сервис.
чтобы вернуться к предыдущему поведению:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
дополнительные сведения см. В разделе Итак: angularjs 1.6.0 (последнее сейчас) маршруты не работают.
самое простое решение-добавить !
к URL-адресам на стороне клиента (если вы не используете режим HTML5, что вы, вероятно, делаете, если вы здесь).
на стороне клиента обновите URL-адреса следующим образом:
#/foo/bar
>#!/foo/bar
и так как вы держите #
, есть нет проблема конфликта с маршрутизацией на стороне сервера. Все счастливы.
немного поздно на вечеринку, но добавление'! в ваших ссылках будет работать нормально. Меня это тоже немного беспокоило. Это изменение в последнем 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>
надеюсь, это вам поможет.
С уважением!
для меня, я решил проблему :
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/
надеюсь, что это поможет.
шифрование косой черты можно отключить:
$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
удалите символ хэша из ссылки, так как вы используете html5mode вам не нужен символ хэша для маршрутизации
<a href="/#/album/{{album.id}}">Link</a>
становится
<a href="/album/{{album.id}}">Link</a>