t8.dev

🇺🇸

Vue Routerとは?使い方を一通り説明する

公開日:2022/01/05
更新日:

はじめに

心理学を使ったTODOアプリを開発している、@takasqrです。

心理学を使ったTODOアプリ | todo8

心理学を使ったTODOアプリ | todo8

Vue Routerとは、Vue公式のルーターです。

Vue Routerと使うことで、

  • ページを作成
  • 作ったページにURLを設定(動的も可)
  • コンポーネント内で画面遷移
  • GETのパラメータを設定してコンポーネント内で取り出す

といったことができます。

インストール方法

主に、2通りのインストール方法があります。

npmを使った方法

npm install vue-router

npmを使う場合はVue.use()を使ってインストールする必要があります。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue CLIを使った方法

vue add router

Vue CLIを使ってプロジェクトを始める場合はこちら。

Vue Routerの基本的な考え方

Vuer RouterはURLに応じて<router-view>内に動的にコンテンツを表示します。

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

Vue CLIを使ってインストールした場合はApp.vue<router-view>が自動的に挿入され、URLに応じて表示内容(コンポーネント)が出し分けられます。

出し分けられるコンポーネントはVueインスタンスを初期化する時に設定します。

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

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

src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'HomePage',
        component: () => import(/* webpackChunkName: "main" */ '../components/page/HomePage.vue')
    },
    {
        path: '/signin',
        name: 'SignInPage',
        component: () => import(/* webpackChunkName: "sign" */ '../components/page/SignInPage.vue')
    },
    {
        path: '/signup',
        name: 'SignUpPage',
        component: () => import(/* webpackChunkName: "sign" */ '../components/page/SignUpPage.vue')
    }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

上の例だと、

  • /...../components/page/HomePage.vue
  • /signin...../components/page/SignInPage.vue
  • /signup...../components/page/SignUpPage.vue

のようにURLとコンポーネントが対応します。

また、Vue Routerを使うことによって、this.$routerthis.$routeが使えるようになります。 この2つを使うことでJavascript上でルーティング関連の操作をすることができるようになります。

画面遷移

<template>上で画面遷移させる方法はこちら。

<router-link to="/signin">signin</router-link>

/signinに画面遷移します。

<script>上で画面遷移させる方法はこちら。

this.$router.push({ path: '/home' })

/homeに画面遷移します。

動的なルーティング

先ほと紹介したルーティングですが、URLを動的に変更したい時があると思います。

例えば/task/0001/task/0002のような形で同じコンポーネントでURLだけ変更したい場合です。 そんな時は上の例だと/task/:taskIdpathを記述します。

{
    path: '/task/:taskId',
    name: 'TaskDetailPage',
    component: () => import(/* webpackChunkName: "main" */ '../components/page/TaskDetailPage.vue')
},

そうすることでコンポーネント内で取り出すことができます。

this.$route.params['taskId']

画面遷移させるコードはこちら。

this.$router.push({ path: `task/${this.taskId}` })

this.taskIddataを使って動的に変更する想定です。

関連記事

【Vue3】vue-cliをインストールして始める

オススメ記事

5年間ほぼ毎日プログラミングの勉強をするためにやったこと
論文と本から学ぶ、プログラミング独学のコツ
目標達成率を高める if thenプランニングとは!?【本とアプリも紹介】