2017-12-02 17 views
0

URLからハッシュタグ(#)を削除したいだけですが、リロードモードを保存する必要もあります。それをしてもいいですか?

私が持っている:page.com/#/home 私がしたい:page.com/home

私はmode: 'history'を試してみましたが、ページには、それを再ロードします。
UPD:ページリロードと通常のURLを使用せずにSPAアプリを作成することはできますか?vue-router URLからhashtag(#)を削除するにはどうすればよいですか?

+2

[urlからhashbangを削除するにはどうすればいいですか?](https://stackoverflow.com/questions/34623833/how-to-remove-hashbang-from-url) –

+0

'mode:history'は正しいです;あなたは[ここ](https://router.vuejs.org/en/essentials/history-mode.html)で説明されているサーバサイドの設定も行いましたか?) –

+0

@DanielBeck'モード:history'は私がそれを設定してもページをリロードしますか? – ramazan793

答えて

1

ヒストリモードを有効にするときは、まずサーバをthe documentationに設定する必要があります。その理由は、履歴モードは現在のページのURLを変更するだけであるためです。ユーザーが実際にページをリロードすると、リクエストされたURLが実際には存在しないため、404エラーが発生します。 SPAのメインindex.htmlに常に対応するようにサーバーを再構成すると、この問題が解決されます。

URL(履歴モードなし)に#を使用すると、ブラウザはIDが#(同じドキュメント内)の後に指定された要素に移動しようとします。これがフラグメント識別子の元の動作でした。したがって、そのようなフラグメント識別子を使用してHTMLにリンクを追加すると、ブラウザはページをリロードせず、実際にドキュメント内のIDを探します。 vue-routerはこの変更を監視し、正しいルートにルーティングします。これがハッシュで動作する理由です。通常のURLをHTMLに追加するだけであれば、ブラウザの本来の動作は実際にこのページに移動することです(ハードリンク)。これにより、経験豊富なリロード効果が得られます。

これを処理する方法は、Vueシングルページアプリケーション内でルーティングするための通常のリンクを決して使用しないことです。 1つのページと別のページとの間のルーティングには、<router-link>タグを使用します(ただし、SPA内のみ)。これは、ブラウザが#でナビゲーションを許可していても、再ロードしなくても行けます。 link

また、あるルートから別のルートにプログラムでルーティングすることもできます。それには$router.push()を使用してください。 link

+1

入手しました。ありがとうございました! – ramazan793

関連する問題