web-dev-qa-db-fra.com

AngularJS Toutes les barres obliques dans l'URL ont été modifiées en% 2F.

J'ai un gros problème avec le routage AngularJS.

Jusqu'à récemment, tout allait bien avec l'itinéraire suivant:

$routeProvider.when('/album/:albumId', {
    controller: 'albumPageController',
    templateUrl: 'views/album.html'
});

et en utilisant le href:

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

Cependant, toutes les barres obliques sont maintenant encodées dans %2F.

Ainsi, lorsque je clique sur le lien ou que je tape localhost:8000/#/album/1 Dans le navigateur, l'URL devient:

http: // localhost: 8000/#% 2Falbum% 2F1

J'ai essayé plusieurs choses pour corriger ceci:

Utilisation de ng-href au lieu de href, pas d'utilisation du premier/(c.-à-d. href="#/album/{{album.id}}") Exécution de l'application dans Homestead localhost (machine à vagabond Linux de Laravel) au lieu de localhost sous Windows 10

Toute aide serait très appréciée!

angularjslaravelhrefangularjs-1.6
49
MC123

%2F est le codage en pourcentage pour la barre oblique / personnage.

Ce problème est lié au fait qu'AngularJS 1.6 a changé la valeur par défaut pour les url hash-bang dans le $location un service.

Pour revenir au comportement précédent:

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

Pour plus d'informations, voir SO: angularjs 1.6.0 (dernière en date), les routes ne fonctionnent pas .

86
georgeawg

La solution la plus simple consiste à ajouter un ! vers les URL côté client (si vous n’utilisez pas le mode HTML5, ce que vous ferez probablement si vous êtes ici).

Côté client, mettez à jour les URL comme ceci:

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

Et puisque vous gardez le #, il y a un problème non de conflit avec le routage côté serveur. Tout le monde heureux.

22
Overdrivr

Un peu tard pour la fête mais en ajoutant un "!" à vos URL fonctionnera très bien. Cela me dérangea aussi un peu. Ceci est un changement dans la dernière version d'AngularJS 1.6.x et j'ai lu quelque part que Google exige que les SPAs aient ce "!" après le hash. En conséquence, mes itinéraires se présentent comme ils le devraient, mais ma navigation me permet d’ajouter "!". 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 ceci vous aide.

Cordialement!

9
realnsleo

Pour moi, j'ai résolu le problème:

app.config(function($locationProvider) {

$locationProvider.hashPrefix('');
$locationProvider.html5Mode({
    enabled: false,
    requireBase: true
  });
});

<a href="#/mylink/"> <span>MyLink</span></a>

Ce qui donne: http://blablabla.co:8888/blabla#/mylink/

J'espère que cette aide.

5
Nizardinho

l'encodage par barre oblique peut être désactivé:

$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

2
Igor Simic

Supprimez 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>
0
Umer Z