Vue.jsでURLの#(シャープ)を取り除く方法

URLの#(シャープ)

Vue-cliでvue.jsのセットアップを行った時、開発環境のURLを叩くと後ろに#(シャープ)が付いてしまいます。

http://localhost:8080と入力しても、http://localhost:8080/#/
となってしまいます。

これはhashモードという状態で付くものであり、これはこれでメリットがあるのですが(ここでは詳細は省きます)、このような状態で公開するのは格好悪いですよね。

historyモードにすることで解決

上記の#(シャープ)は、routerの設定でhistoryモードにすることで解決します。

例として、変更前のrouterの設定が以下であるとした場合に、

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Top',
      component: Top
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    }
  ]
})

以下のように mode: 'historyを入れれば解決です。

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Top',
      component: Top
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    }
  ]
})

historyモードの注意点が1つあり、サーバ側のルーティング指定を適切に行わないと、http://localhost:8080/testとした場合に404エラーが発生してしまいます。

.htaccessの設定を変えるなど解決方法は調べれば出てくるのでここでは省きますが、後々別なところで適切なルーティングを行うための設定が必要になるということは留意してください。