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

Question

J'ai un énorme problème avec AngularJS de routage.

Jusqu'à récemment, tout a été très bien avec le parcours suivant:

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

et en utilisant le href:

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

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

Alors, quand je clique sur le lien, ou de type localhost:8000/#/album/1 dans le navigateur, l'URL est modifiée:

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

J'ai essayé plusieurs choses à corriger ce:

À l'aide de ng-href plutôt que de href, Ne pas utiliser le premier / (ie href="#/album/{{album.id}}") L'exécution de l'application dans Homestead localhost (Laravel linux vagabond de la machine) à la place de localhost sur Windows 10

Toute aide serait grandement appréciée!

Answer 1

%2F est le pourcentage de codant pour la barre oblique / de caractère.

Ce problème est lié au fait que AngularJS 1.6 a changé la valeur par défaut pour le haschich-bang url dans l' $location de service.

Pour revenir à l'ancien comportement:

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

Pour plus d'informations, voir DONC: angularjs 1.6.0 (dernière maintenant) pour les trajets de travail.

Answer 2

La solution la plus simple consiste à ajouter un ! aux 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 conservez les # , il n’ya pas de problème de conflit avec le routage côté serveur. Tout le monde heureux.

Answer 3

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!

Answer 4

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>
 

Lequel donne: http://blablabla.co:8888/blabla#/mylink/

J'espère que cette aide.

Answer 5

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