Vue Routerのインストール（Vue3）

内容

Vue3でVue Routerを導入する手順。
Viteで作成しているアプリケーションに、npmで途中から導入するときの手順。
「Vite」を使用してVueプロジェクトを立ち上げる

目次

• VueRouterのインストール
• ページに使うコンポーネントを用意
• router.jsの作成
• main.jsにrouterを読み込む
• App.vueを作成する
• 画面確認

VueRouterのインストール

Vue3に対応するVue Routerは、Ver.4以降。

npm install vue-router@next

ページに使うコンポーネントを用意

例）HelloWorld.vueとHelloJSX.jsxを作成

HelloWorld.vue

<template>
  <div class="alert alert-primary">
    <h1>{{ data.title }}</h1>
    <p class="mt-3 h5">{{ data.msg }}</p>
  </div>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
  name: 'HelloWorld',
  setup(props, context) {
    const data = reactive({
      title: 'HelloWorld',
      msg: 'This is HelloWorld component.'
    })
    return {
      data
    }
  }
}
</script>

HelloJSX.jsx

import { ref, reactive } from 'vue'
export default {
  name: 'HelloJSX',
  setup(props) {
    const data = reactive({
      title: 'HelloJSX',
      msg: 'This is JSX component sample.',
    })
    return () => (
      <div class="alert alert-warning">
        <h1>{data.title}</h1>
        <p>{data.msg}</p>
      </div>
    )
  }
}

router.jsの作成

src/router.js　を作成

src/router.js

// まずはimport文でVueRouterから必要な関数などを用意する。
// ルーティングで割り当てるコンポーネント類も用意しておく。
import { createRouter, createWebHistory} from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import HelloJSX from './components/HelloJSX.jsx'

// メモ
// export 値 で、そのスクリプトファイルをimportした時に指定の値が取り出せるようになる。
// routerオブジェクトは、スクリプトを作成後、Vue3のアプリケーションに組み込む必要がある。
// このため、exportを使ってrouterオブジェクトが外部から利用できるようにする。
export const router = createRouter({
  // createRouterの引数のオブジェクトにhistoryとroutesという値を用意する
  history: createWebHistory(),
  routes: [
    {
      path: '/',             // 割り当てるパス
      name: 'index',         // 名前
      component: HelloWorld, // 割り当てるコンポーネント
    },
    {
      path: '/jsx',
      name: 'jsx',
      component: HelloJSX,
    }
  ]
})

main.jsにrouterを読み込む

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import { router } from './router' // routerオブジェクトをインポート

// routerをアプリケーションに組み込む
createApp(App).use(router).mount('#app')

App.vueを作成する

<template>
  <div id="app">
    <div>
      <router-link to="/" class="btn btn-primary mx-2">
        Go to Top
      </router-link>
      <router-link to="/jsx" class="btn btn-warning">
        Go to JSX
      </router-link>
    </div>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'app',
  created() {
    console.log('** App Created!! **') // createの確認用
  },
  mounted() {
    console.log('-- App Mounted!! --') // mountedの確認用
  },
  data() {
    return {
      title: 'Router'
    }
  }
}
</script>

画面確認

npm run dev # 開発中ですでにサーバーが立ち上がっている場合は、⌃cで一度停止して再立ち上げする