angularjs - ng-href angular 4

AngularJS Todas las barras en la URL cambiaron a% 2F

Question

Tengo un gran problema con el enrutamiento AngularJS.

Hasta hace poco, todo ha ido bien con la siguiente ruta:

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

y usando el href:

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

Sin embargo, ahora todas las barras están codificadas en %2F .

Entonces, cuando hago clic en el enlace o localhost:8000/#/album/1 en el navegador, la URL cambia a:

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

He intentado varias cosas para corregir esto:

Usar ng-href en lugar de href, no usar el primer / (es decir, href="#/album/{{album.id}}" ) Ejecutar la aplicación en Homestead localhost (máquina vagabunda Linux de Laravel) en lugar de localhost en Windows 10

Cualquier ayuda sería muy apreciada!

Answer 1

Elimine el símbolo hash del enlace, ya que está utilizando html5mode, no necesita un símbolo hash para el enrutamiento

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

se convierte

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

Answer 2

La codificación de barra se puede deshabilitar:

$urlMatcherFactoryProvider.type(''SlashFix'', {
raw: true,
});
$stateProvider
.state(''content'',{
url: ''/{slug:SlashFix}''
...
})

como se describe aquí https://www.coditty.com/code/angular-ui-router-replacing-slash-with-2f-quick-fix

Answer 3

La solución más simple es agregar un ! a las URL del lado del cliente (si no usa el modo HTML5, lo que probablemente haga si está aquí).

Del lado del cliente, actualice las URL como esta:

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

Y dado que mantiene el # , no hay problema de conflicto con el enrutamiento del lado del servidor. Todo el mundo feliz.

Answer 4

Para mí, solucioné el problema:

app.config(function($locationProvider) {
$locationProvider.hashPrefix('''');
$locationProvider.html5Mode({
enabled: false,
requireBase: true
});
});
<a href="#/mylink/"> <span>MyLink</span></a>

Que dan: http://blablabla.co:8888/blabla#/mylink/

Espero que esto ayude.

Answer 5

Un poco tarde para la fiesta pero agregando un ''!'' a sus URL funcionará bien. Esto también me molestó un poco. Este es un cambio en el último AngularJS 1.6.xy leí en alguna parte que Google requiere que los SPA tengan ese ''!'' después del hash. Como resultado, mis rutas se ven como deberían pero mi navegación se asegura de agregar ''!'' en mis referencias Por ejemplo:

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

Espero que esto te ayude.

¡Saludos!

Answer 6

%2F es la percent-encoding para la barra diagonal / carácter.

Este problema está relacionado con el hecho de que AngularJS 1.6 ha cambiado el valor predeterminado para las URL de hash-bang en el servicio $location .

Para volver al comportamiento anterior:

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

Para obtener más información, consulte SO: las rutas de angularjs 1.6.0 (la última ahora) no funcionan .