Vue.jsのURLで#(シャープ)を使う方法と使わない方法

今回は、プログラミングに関する短めの記事になります。

先日紹介させてもらった赤ちゃんの離乳食メニューの予定作成・記録ができるアプリ「ベビーフードダイアリー」はVue.jsを使って開発をしています。

最近のVue.jsを使った場合URLに#が含まれない形がデフォルトだったのですが、自分が使ったリリース方法(AWS CloudFrontとS3を使って開発)では#が無いとうまく動作しなかったためその解決方法と逆に#を使う方法を解説します。

同じような環境で開発を行っている方の参考になれば幸いです。

目次

• #を使う/使わないはVueRouterの書き方
• #を使う方法
• #を使わない方法
• #を使うようにした理由

---

#を使う/使わないはVueRouterの書き方

早速結論ですが、Vue.jsのURLはrouter/index.jsで制御する仕様になっているため、router/index.jpの書き方で、#の有無を制御します。

それぞれの方法について、できるだけコピペしやすい形で記載しておきますので、サクッと試して解決できるか検証に使ってもらえたらと思います。

---

#を使う方法

router/index.jsを以下のような書き方にする。

以下の書き方で、Helloworldコンポーネントを [ドメイン]/#/helloworld というURLで表現する形になります。

※ 各importは環境に合わせて変更してください。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from '../components/Dashboard.vue'
import Helloworld from '../components/Helloworld.vue'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: Dashboard
    },
    {
      path: '/helloworld',
      name: 'Helloworld',
      component: Helloworld
    }
  ]
})

---

#を使わない方法

router/index.jsを以下のような書き方にする。

以下の書き方で、Helloworldコンポーネントを [ドメイン]/helloworld というURLで表現する形になります。

※ 各importは環境に合わせて変更してください。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from '@/components/Dashboard.vue'
import Helloworld from '@/components/Helloworld.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard
  },
  {
    path: '/helloworld',
    name: 'Helloworld',
    component: Helloworld
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

---

#を使うようにした理由

今回ベビーフードダイアリーはサーバーと連携せずVue.jsだけで完結できるPWAアプリとして開発しているため、APIサーバーなどは不要な構成としました。

そのため、シンプルなAWSのCloudFrontとS3だけで環境を作るのですが、この組み合わせの場合URLの末尾が/helloworldのようになると/helloworldというディレクトリが無いためエラーになってしまいます。(Vue.jsのビルド済みファイル構成の中にそのようなファイルが無いため。)

これを回避するために、/#/helloworldとなる形を取りました。こうすることで、実態としては/index.html#/helloworldというURL構成で解釈され、Vue.jsで定義したURL構成に従って動いてくれるようになります。

---

以上、簡単ではありますがVue.jsのURLで#を使う方法と使わない方法の解説でした。

Vue.jsを使ってプログラミング/Webアプリ開発を行っている方の参考になれば幸いです。

JavaScriptにある程度理解があれば >> これからはじめるVue.js実践入門 (日本語)

具体例でわかりやすい >> Vue.jsのツボとコツがゼッタイにわかる本