vue-routerでurlから#を取り除く方法

vue-routerでアプリケーションを作成すると、urlに#が付与されます。

これを取り除く方法をメモ。

#はhistoryモードで除去

router.jsで記載した内容に少し手を加えるだけです。

export default new Router({
    mode: "history",
    routes: [
        // 省略
    ]
})

historyモードでは#が消え、URLもすっきりします。

注意点

#は簡単に消せますが注意点もあります。

まず、urlごとの切り替えは通信不要で行えましたが、historyモードではurlを切り替える度に通信が発生します。

また、これが一番の注意点ですが、本番環境デプロイ時にはサーバー側の設定例を修正する必要があります。

開発時のローカルサーバーではそこら辺をよしなにしてくれますが、本番時のサーバーでは自身で設定することになります。

詳しくは公式に記載があるので、そちらを参考にしてみてください。

HTML5 Historyモード | Vue Router