🌊

【Vue.js】画面遷移の機能を導入 Vue Router

3 min read

執筆に至った経緯

【WEB開発】Vue.js + TailWind CSS 導入編を今後拡大していく上でページを複数欲しくなると思いますのでルーティングの仕組みを導入していきたいと思います。
※Vueプロジェクト作成方法によってはVue Routerはデフォルで導入してくれる項目があったりします。

Vue Routerとは

https://router.vuejs.org/ja/

Vue.jsを利用したプロジェクトで、ルーティング制御をするための公式プラグインです。
ページを複数用意する際には必要となってる機能になります。

Vue Router導入

まずはVue Routerをプロジェクトにインストールします。
ターミナルから下記コマンドを入力するだけなので簡単です。

npm install vue-router@next

npm install vue-router だとエラーがでました。

詳しい理由は調べましたがピンとくる説明がみつからなかったので、もし詳しい人がいましたらコメントいただけると幸いです

router.jsを作成する

ルーティングファイルを作成します。
ここでは指定されたルーティング事に呼び出すコンポーネントを宣言したりします。
作成場所はsrc/routerディレクトリを作成し、index.jsを作成します

router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

今回はTOP画面へのルーティングを作成
※まだviewファイルを作成していないので動きません!

viewファイルを作成する

/のルートで表示させるviewファイルを作成します。
viewsディレクトリを作成しHome.vueというファイルを作成します。

views/Home.vue
<template>
  <!--
    all(mobile): bg-gray-200
    sm(min-width: 640px):red
    md(min-width: 768px):yellow
    lg(min-width: 1024px):green
    xl(min-width: 1280px):blue
  -->
    <article class="max-w-7xl w-full bg-gray-200 sm:bg-red-200 md:bg-yellow-200 lg:bg-green-200 xl:bg-blue-200">
      <img class="m-auto" alt="Vue logo" src="../assets/logo.png" />
      <HelloWorld msg="Hello Vue 3 + Vite" />
    </article>
</template>

<script setup>
import HelloWorld from "../components/HelloWorld.vue";

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
</script>

main.jsにVue Routerモジュールを追加

main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
+ import router from './router'

- createApp(App).mount('#app')
+ createApp(App).use(router).mount('#app')

App.vueにVue Routerを反映させる

App.vue<router-view/>タグを追加する事でVue Routerが機能するようになります。

App.vue
<template>
  <router-view/>
</template>

<script setup>

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
</script>

今までApp.vueに直で書いていたコードがなくなりスッキリしました。
表示場何も変化がなければ成功となります

まとめ

Vue RouterはCLIでプロジェクトを作成する際にPlease pick a presetManually select featuresを選択し初期でVue Routerを選択してれば自動で導入されていますので、プロジェクト作成段階で決まっているのであれば初期導入をオススメします。
ですが、Vueでは以外と簡単にモジュールを追加している事を説明したい所もあったのでこのように既に存在するプロジェクトに導入する方法を解説しました

Discussion

ログインするとコメントできます