web-dev-qa-db-ja.com

AngularJS URLのすべてのスラッシュが％2Fに変更されました

AngularJSルーティングに大きな問題があります。

最近まで、次のルートですべてが順調でした：

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

そしてhrefを使用して：

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

ただし、現在はすべてのスラッシュが%2Fにエンコードされています。

そのため、リンクをクリックするか、ブラウザにlocalhost:8000/#/album/1と入力すると、URLは次のように変更されます。

http：// localhost：8000 /＃％2Falbum％2F1

これを修正するためにいくつかのことを試しました。

Hrefの代わりにng-hrefを使用し、最初の/（つまりhref="#/album/{{album.id}}"）を使用しない

どんな助けも大歓迎です！

angularjslaravelhrefangularjs-1.6
49
MC123

%2Fは、スラッシュ/文字の percent-encoding です。

この問題は、AngularJS 1.6が$locationサービスのハッシュバンURLのデフォルトを変更したという事実に関連しています。

前の動作に戻すには：

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

詳細については、 SO：angularjs 1.6.0（最新）ルートが機能しない を参照してください。

86
georgeawg

最も簡単な解決策は、クライアント側のURLに!を追加することです（HTML5モードを使用していない場合、おそらくここにいる場合はこれを実行します）。

クライアント側で、次のようにURLを更新します。

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

また、#を保持するため、サーバー側ルーティングとの競合のnoの問題があります。みんな幸せ。

22
Overdrivr

パーティーに少し遅れましたが、「！」を追加しますあなたのURLにうまく動作します。これも少し気になりました。これは最新のAngularJS 1.6.xの変更であり、GoogleはSPAに「！」ハッシュの後。その結果、私のルートは見た目通りに見えますが、ナビゲーションにより「！」が追加されます。私の参照で。例えば：

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

これがあなたのお役に立てば幸いです。

よろしく！

9
realnsleo

私にとって、私は問題を修正しました：

app.config(function($locationProvider) {

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

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

どれが： http://blablabla.co:8888/blabla#/mylink/

この助けを願っています。

5
Nizardinho

スラッシュエンコーディングは無効にできます。

$urlMatcherFactoryProvider.type('SlashFix', {
  raw:    true,
});


$stateProvider
      .state('content',{
       url: '/{slug:SlashFix}'
       ...

      })

ここで説明されているとおり https://www.coditty.com/code/angular-ui-router-replacing-slash-with-2f-quick-fix

2
Igor Simic

リンクからハッシュ記号を削除します。html5modeを使用しているため、ルーティングにハッシュ記号は不要です

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

になる

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