[Vue-CLI]vue-routerを使ってurlごとに表示を制御する

2021-03-25

SPAを作っている時にURLごとに表示を制御したい場合があります。

トップページ、aboutページ、contactページなどですね。

そうしたケースで使用するvue-routerについてメモ。

vue-router

てっきりVue-CLIに最初から組み込まれていると思っていましたが、Vue-CLIでURLごとに表示を切り替えるアプリケーションを作る場合は別途、vue-routerをインストールしなくてはいけません。

vue-routerのインストール
routeを制御するrouter.jsを作成
main.jsを編集
App.vueを編集

こういった流れになります。さっそく見ていきます。

vue-routerのインストール

プロジェクトディレクトリ内で、以下のコマンドを入力してインストール。

$ npm install vue-router

router.jsの作成

router.jsはsrc配下に作成することが多いようなので、こちらに。別にmain.jsに記述してもいいですが、冗長になるので別ファイルの方がやりやすいと思います。

このrouter.jsは「このURLになったら、こういった処理をする」というものを記載します。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

// プラグインを適用
Vue.use(Router)

export default new Router({
    routes: [
        {path: '/', component: Home},
        {path: '/about', component: About}
    ]
})

前後しますが、components内にHome.vueやAbout.vueを作成しておきます。componetnsディレクトリとは別にviewsディレクトリを作成して、そちらで管理してもいいと思います。

main.jsを編集

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

import routerの箇所でrouter.jsを読み込みます。

また、new Vue内にもrouter使用の記述をします。