はじめに
vue-routerを使用しているとURLにデフォルトで出てくる#
を消す方法についてまとめました。
環境
OS: macOS Catalina 10.15.1
Vue: 2.6.10
vue-cli: 4.1.1
vue-router: 2.6.10
結論:ヒストリーモードにする
src/router.js
に以下を追記する。
src/router.js
const router = new VueRouter
mode: 'history', //追記
routes: [
...略
]
})
注意点と対処法
これで#
自体は消えてくれるのですが、公式ドキュメントに注意点が書かれています。
history モードを使用する時は、URL は "普通" に見えます e.g. http://oursite.com/user/id。美しいですね!
しかしながら一点問題があります。シングルページのクライアントサイドアプリケーションなので、適切なサーバーの設定をしないと、ユーザーがブラウザで直接 http://oursite.com/user/id にアクセスした場合に 404 エラーが発生します。
※各サーバー毎の処理方法は公式に書かれているので、当記事ではnginxの設定のみ抜粋します。
nginxでの対処法
以下を記述。
これにより、もし404 Not Foundになったらindex.html
が読み込まれます。
location / {
try_files $uri $uri/ /index.html;
}
さらに注意点
このままでは、サーバー側が一切404 Not Foundを表示してくれなくなるので、代わりにクライアント側で表示する必要があります。
src/router.js
import NotFound from './components/NotFound.vue' //追記
const router = new VueRouter
mode: 'history',
routes: [
{ path: '*', //ここから3行追記
name: 'NotFound',
component: NotFound },
]
})
NotFound.vue
<template>
<div>
<h1>Oops!!! Page Not Found</h1>
</div>
</template>
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです