AngularJS Todas as barras no URL foram alteradas para% 2F

Estou tendo um problema enorme com o roteamento AngularJS.

Até recentemente tudo foi bem com a seguinte rota:

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

e usando o href:

 Link 

No entanto, agora todas as barras estão sendo codificadas em %2F .

Então, quando clico no link ou digito localhost:8000/#/album/1 no navegador, o URL é alterado para:

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

Eu tentei várias coisas para corrigir isso:

Usando ng-href em vez de href, Não usando o primeiro / (ou seja, href="#/album/{{album.id}}" ) Executando o aplicativo em Homestead localhost (máquina vagrant linux do Laravel) em vez de localhost no Windows 10

Qualquer ajuda seria muito apreciada!

%2F é a codificação percentual para o caractere / barra.

Esse problema está relacionado ao fato de que o AngularJS 1.6 alterou o padrão para URLs de hash no serviço $location .

Para reverter para o comportamento anterior:

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

Para obter mais informações, consulte SO: angularjs 1.6.0 (mais recente agora) rotas não funcionando .

A solução mais simples é adicionar um ! para URLs do lado do cliente (se não estiver usando o modo HTML5, o que você provavelmente fará se estiver aqui).

No lado do cliente, atualize URLs como esta:

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

E desde que você mantenha o # , não há nenhum problema de conflito com o roteamento do lado do servidor. Todo mundo feliz.

Um pouco atrasado para a festa, mas adicionando um ‘!’ para seus URLs funcionará muito bem. Isso me incomodou um pouco também. Esta é uma mudança no mais recente AngularJS 1.6.xe eu li em algum lugar que o Google exige que os SPAs tenham esse ‘!’ depois do hash. Como resultado, minhas rotas parecem como deveriam, mas minha navegação garante que eu adicione ‘!’ nas minhas referências. Por exemplo:

  

Espero que isso ajude você.

Saudações!

Para mim, consertei o problema:

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

Que dão: http://blablabla.co:8888/blabla#/mylink/

Espero que esta ajuda.

a codificação de barra pode ser desativada:

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

como descrito aqui https://www.coditty.com/code/angular-ui-router-replacing-slash-with-2f-quick-fix

Remova o símbolo de hash do link, já que você está usando o html5mode você não precisa de um símbolo de hash para roteamento

 Link 

torna-se

 Link