はじめに

前回はプロジェクトを作って簡単に動作確認したところまでです。今回はその続きでルーティングを追加します。

やること

vue-router(https://github.com/vuejs/router)を使うので、それをinstallします。

コンポーネントの作成

ページ遷移した時の元のページと遷移先のページ、それぞれに該当するコンポーネントを作ります。今回作るのはタスク一覧ページ用のコンポーネントとタスク作成用のコンポーネントです。 src/components直下にそれぞれ作ります。

<template>
  <div>
    <h2>タスク一覧ページ</h2>
    <router-link to="/createTask">タスク作成ページ</router-link>
  </div>
  <div>
    <router-link to="/">トップへ</router-link>
  </div>
</template>a

<template>
  <div>
    <h2>新規タスク追加</h2>
    <router-link to="/taskList">タスク一覧へ</router-link>
  </div>
</template>

続いてrouter/index.jsを作成しルーティングの定義を記載する

こちら勉強で参考にしたサイトでrouter/index.jsを作成してルーティングを記載していたので、それに合わせています。もしかしたら、この先勉強を進めていったら変わるかもしれませんが、一旦は同じようにやってみました。

import { createRouter, createWebHistory } from 'vue-router'
import TaskList from '@/components/TaskList.vue'
import CreateTask from '@/components/CreateTask.vue'

const routes = [
  {
    path: '/',
    name: 'top',
    component: TaskList
  },
  {
    path: '/taskList',
    name: 'taskList',
    component: TaskList
  },
  {
    path: '/createTask',
    name: 'createTask',
    component: CreateTask
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

main.jsにrouter/index.jsを追加

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

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

App.vueに<router-view />を追加

最後に<router-view />をApp.vueに<router-view />を追加します。するとページングが表示されます。

vueにルーティングの追加が出来ましたので、次のステップに進みたいと思います。まだまだ先は長いです

nakaearthの日記

Vueを使ってみたパート2