【Vue.js】画面遷移の機能を導入 Vue Router
執筆に至った経緯
【WEB開発】Vue.js + TailWind CSS 導入編を今後拡大していく上でページを複数欲しくなると思いますのでルーティングの仕組みを導入していきたいと思います。
※Vueプロジェクト作成方法によってはVue Routerはデフォルで導入してくれる項目があったりします。
Vue Routerとは
Vue.jsを利用したプロジェクトで、ルーティング制御をするための公式プラグインです。
ページを複数用意する際には必要となってる機能になります。
Vue Router導入
まずはVue Routerをプロジェクトにインストールします。
ターミナルから下記コマンドを入力するだけなので簡単です。
npm install vue-router@next
詳しい理由は調べましたがピンとくる説明がみつからなかったので、もし詳しい人がいましたらコメントいただけると幸いです
router.jsを作成する
ルーティングファイルを作成します。
ここでは指定されたルーティング事に呼び出すコンポーネントを宣言したりします。
作成場所はsrc/に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というファイルを作成します。
<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モジュールを追加
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が機能するようになります。
<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 presetでManually select featuresを選択し初期でVue Routerを選択してれば自動で導入されていますので、プロジェクト作成段階で決まっているのであれば初期導入をオススメします。
ですが、Vueでは以外と簡単にモジュールを追加している事を説明したい所もあったのでこのように既に存在するプロジェクトに導入する方法を解説しました
Discussion