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

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

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

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

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

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

目次


#を使う/使わないは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のツボとコツがゼッタイにわかる本

この記事もおすすめ