web-dev-qa-db-ja.com

URLからhashbangを削除する方法？

Urlからhashbang #!を削除する方法？

私はvueルーターのドキュメントにハッシュバングを無効にするオプションを見つけました（ http://vuejs.github.io/vue-router/en/options.html ）このオプションは#!を削除して#を置くだけです

きれいなURLを表示する方法はありますか？

例：

NOT：#!/home

しかし：/home

vue.js
186
DokiCRO

実際にはmodeを'history'に設定したいだけです。

const router = new VueRouter({
  mode: 'history'
})

ただし、サーバーがこれらのリンクを処理するように構成されていることを確認してください。 https://router.vuejs.org/guide/essentials/history-mode.html

359
Bill Criswell

Vue.js 2では、以下を使用してください。

const router = new VueRouter({
 mode: 'history'
})
65
Israel Morales

ハッシュはデフォルトのvue-routerモード設定です。ハッシュを使用すると、アプリケーションはURLを提供するためにサーバーに接続する必要がないため設定されます。変更するには、サーバーを設定してモードをHTML 5 History APIモードに設定します。

サーバー構成の場合、これはApache、Nginx、およびNode.jsサーバーをセットアップするのに役立つリンクです。

https://router.vuejs.org/guide/essentials/history-mode.html

次に、そのvue routerモードが次のように設定されていることを確認してください。

vue-routerバージョン2.x

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

明確にするために、これらはあなたが選ぶことができるすべてのvue-routerモードです： 「歴史」 "抽象"。

15
Tadas Stasiulionis

Vuejs 2.5とvue-router 3.0では、上記では何もできませんでしたが、少し遊んだ後は次のようになりました。

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
  ...
    ,
    { path: '*', redirect: '/' }, // catch all use case
  ],
})

キャッチオールパスも追加する必要があります。

9
Adil H. Raza
window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

そしてサーバは正しく設定されていますApacheではあなたはURL書き換えを書くべきです

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>
8
vivek

ドキュメントの引用.

Vue-routerのデフォルトモードはハッシュモードです - URLが変更されたときにページが再ロードされないように完全なURLをシミュレートするためにURLハッシュを使います。

ハッシュを取り除くために、ルーターの履歴モードを使用することができます。これはhistory.pushState APIを利用して、ページをリロードすることなくURLナビゲーションを実現します。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

履歴モードを使用すると、URLは「通常」に見えます。 http://oursite.com/user/id 。綺麗な！

ただし、ここで問題が発生します。私たちのアプリは適切なサーバー設定がない単一ページのクライアントサイドアプリなので、ユーザーがアクセスすると404エラーが発生します http://oursite.com/user/id を直接ブラウザに表示します。今それは醜いです。

心配しないでください。問題を解決するためにあなたがする必要があるのはあなたのサーバーに単純な包括的な代替ルートを追加することだけです。 URLがどの静的アセットとも一致しない場合は、アプリが存在するのと同じindex.htmlページを提供する必要があります。

4
Ankit Kumar Ojha