AngularJS toutes les barres obliques de L'URL sont changées en %2F
j'ai un gros problème avec le routage AngularJS.
jusqu'à récemment tout s'est bien passé avec la route suivante:
$routeProvider.when('/album/:albumId', {
controller: 'albumPageController',
templateUrl: 'views/album.html'
});
et en utilisant le href:
<a href="/#/album/{{album.id}}">Link</a>
cependant, maintenant tous les slashs sont encodés dans %2F .
donc quand je clique sur le lien, ou que je tape localhost:8000/#/album/1 dans le navigateur, L'URL est changée en:
j'ai essayé plusieurs choses pour corriger cela:
utilisant ng-href au lieu de href,
Ne pas utiliser le premier / (ie href="#/album/{{album.id}}" )
Exécuter L'application dans Homestead localhost (machine errante linux de Laravel) au lieu de localhost sous Windows 10
toute aide serait très appréciée!
6 réponses
%2F est le pourcentage d'encodage pour le caractère / .
ce problème est lié au fait Qu'AngularJS 1.6 a modifié la valeur par défaut pour les URL de hachage-bang dans le service $location .
pour revenir au comportement précédent:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
pour plus d'informations, voir SO: angularjs 1.6.0 (le plus récent maintenant) routes ne fonctionne pas .
la solution la plus simple est d'ajouter un ! aux URLs côté client (si vous n'utilisez pas le mode HTML5, ce que vous faites probablement si vous êtes ici).
côté Client, mettre à jour les URLS comme ceci:
#/foo/bar > #!/foo/bar
et puisque vous gardez le # , il y a Non problème de conflit avec le routage côté serveur. Tout le monde est content.
un peu en retard à la fête mais en ajoutant un'!"à votre Url fonctionnent très bien. Cela me gênait un peu. Il s'agit d'un changement dans le dernier AngularJS 1.6.x et moi avons lu quelque part que Google a besoin de SPAs pour avoir ça '!"après le hachage. En conséquence, mes itinéraires ont l'air comme ils devraient, mais ma navigation fait en sorte que j'ajoute "!"dans mes références. Par exemple:
<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>
j'espère que cela vous aide.
salutations!
pour moi, j'ai corrigé le problème:
app.config(function($locationProvider) {
$locationProvider.hashPrefix('');
$locationProvider.html5Mode({
enabled: false,
requireBase: true
});
});
<a href="#/mylink/"> <span>MyLink</span></a>
qui donne: http://blablabla.co:8888/blabla#/mylink /
Espérons que cette aide.
barre de codage peuvent être désactivées:
$urlMatcherFactoryProvider.type('SlashFix', {
raw: true,
});
$stateProvider
.state('content',{
url: '/{slug:SlashFix}'
...
})
comme décrit ici https://www.coditty.com/code/angular-ui-router-replacing-slash-with-2f-quick-fix
supprimer le symbole de hachage du lien, puisque vous utilisez html5mode vous n'avez pas besoin d'un symbole de hachage pour le routage
<a href="/#/album/{{album.id}}">Link</a>
devient
<a href="/album/{{album.id}}">Link</a>