Vue.jsでURLの#(シャープ)を取り除く方法 - 親バカエンジニアのナレッジ帳

URLの#(シャープ)
historyモードにすることで解決

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
    }
  ]
})