URLからハッシュバングを削除する方法？

#!URLからハッシュバングを削除する方法？

Vueルーターのドキュメント（http://vuejs.github.io/vue-router/en/options.html）にハッシュバングを無効にするオプションが見つかりましたが、このオプションは削除されます#!れて#

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

例：

しない： #!/home

だが： /home

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

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

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

vue.js 2の場合、以下を使用します。

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

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

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

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

次に、Vueルーターモードが次のように設定されていることを確認する必要があります。

vue-routerバージョン2.x

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

明確にするために、これらは選択できるすべてのvue-routerモードです。「歴史」| "概要"。

Vuejs 2.5とvue-router 3.0の場合、上記では何も機能しませんでしたが、少し遊んだ後、次のように機能するようです。

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

キャッチオールパスも追加する必要があることに注意してください。

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>

ドキュメントを引用しています。

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

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

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

履歴モードを使用する場合、URLは「通常」のようになります（例：http : //oursite.com/user/id）。綺麗な！

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

心配する必要はありません。問題を修正するには、サーバーに簡単なキャッチオールフォールバックルートを追加するだけです。URLがどの静的アセットとも一致しない場合は、アプリが存在するのと同じindex.htmlページを提供する必要があります。また美しいです！

をvue-router使用するhash-modeと、簡単な言葉で言えば、これは通常、このようなachorタグに期待されるものです。

<a href="#some_section">link<a>

ハッシュを消すには

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
] // Routes Array
const router = new VueRouter({
  mode: 'history', // Add this line
  routes
})

Warning：適切に構成されたサーバーがない場合、またはクライアント側のSPAユーザーを使用している場合、ユーザーがブラウザーから直接404 Error アクセスしようとすると、ユーザーがを取得することがありますhttps://website.com/posts/3。 Vueルータードキュメント

vue-routerのデフォルトモードはハッシュモードです。URLハッシュを使用して完全なURLをシミュレートし、URLが変更されたときにページがリロードされないようにします。ハッシュを取り除くために、ルーターの履歴モードを使用できます。これは、history.pushStateAPIを利用して、ページをリロードせずにURLナビゲーションを実現します。

import {routes} from './routes'; //import the routes from routes.js    

const router = new VueRouter({
    routes,
    mode: "history",
});

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

routes.js

import ComponentName from './ComponentName';

export const routes = [
   {
      path:'/your-path'
      component:ComponentName
   }
]

参照

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

AWS amplifyを使用している場合は、サーバーの構成方法に関するこの記事を確認してください：Vueルーターの履歴モードとAWS Amplify