AngularJS Tutte le barre nell'URL sono state modificate in% 2F



laravel href (4)

Sto riscontrando un grosso problema con il routing AngularJS.

Fino a poco tempo fa tutto è andato bene con il seguente percorso:

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

e usando l'href:

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

Tuttavia, ora tutte le barre vengono codificate in %2F .

Quindi, quando faccio clic sul collegamento o localhost:8000/#/album/1 nel browser, l'URL viene modificato in:

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

Ho provato diverse cose per correggere questo:

Usando ng-href invece di href, Non usando il primo / (cioè href="#/album/{{album.id}}" ) Esecuzione dell'app in Homestead localhost (macchina vagabonda linux di Laravel) invece di localhost su Windows 10

Qualsiasi aiuto sarebbe molto apprezzato!


La soluzione più semplice è aggiungere un ! agli URL lato client (se non si utilizza la modalità HTML5, cosa che probabilmente si fa se ci si trova qui).

Lato client, aggiorna gli URL in questo modo:

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

E poiché si mantiene il # , non vi è alcun problema di conflitto con il routing lato server. Tutti contenti.


Per me, ho risolto il problema:

app.config(function($locationProvider) {

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

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

Che danno: http://blablabla.co:8888/blabla#/mylink/

Spero che questo aiuto.


Un po 'in ritardo alla festa ma aggiungendo un "!" per i tuoi URL funzionerà bene. Anche questo mi ha infastidito un po '. Questo è un cambiamento nell'ultima AngularJS 1.6.x e ho letto da qualche parte che Google richiede alle SPA di avere quel "!" dopo l'hash. Di conseguenza i miei percorsi sembrano come dovrebbero, ma la mia navigazione mi assicura di aggiungere "!" nei miei riferimenti. Per esempio:

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

Spero che questo ti aiuta.

Saluti!






angularjs-1.6