Vue.jsにVue Routerを導入して、タグで画面遷移する方法!

Vue.js Vue.js

今回はVue.jsのプロジェクトにVue Routerを導入して、画面遷移する方法について解説しています。

まず、Vueのバージョン3に対して、Vue Routerを導入する方法を記載しています。
その後にVue Routerを使用して、ルーティングを作成する方法をサンプルコード付きで解説しています。

この記事で出てくる、実際に検証したツールのバージョンは下記になります。

Vue.js 3.2.13
Vue CLI 5.0.1
Vue Router 4.0.12

Vue Routerの公式ページはこちらになります。

Vue.jsのプロジェクトにVue Routerを後から導入する

Vue.jsのプロジェクトをVue CLIで作成した後にVue Routerを導入する方法です。
下記のコマンドで、導入することができます。

$ npm install vue-router@4

実行すると、下記のようにインストールが完了します。

$ npm install vue-router@4

added 23 packages, and audited 24 packages in 7s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

インストールが完了すると、package.jsonに追加されていることが確認できます。

{
  "name": "first-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.12"
  },
  //----省略----
}

公式のgithubを確認すると、Vue Routerはバージョン4からVueのバージョン3で使用するようになったようです。

Vue CLIでプロジェクト作成時にVue Routerを追加する

プロジェクトの作成時にVue Routerを追加する方法です。
プロジェクトの作成時にも、機能追加するオプションを選ぶことで追加することが可能です。

Vue CLIを使って、下記のようにプロジェクトを追加します。(Vue CLI 5.0.1です)

$ vue create router-app

そうすると、このようにVueのバージョンを選ぶか「Manually select features」(手動で機能選択)するかを選択します。
この時に「Manually select features」を選択します。

Vue CLI v5.0.1
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features

すると、追加できる機能が下記のように現れるので、Routerをスペースを押して選択します。
選択した後はエンターで決定します。

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

その後にもプロジェクトを作成するための選択肢が出てくるので、適宜設定します。
今回は下記のように設定しました。

Vue CLI v5.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

設定完了後は待っていると、下記のように終了します。

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project router-app.
👉  Get started with the following commands:

 $ cd router-app
 $ npm run serve

Vue Routerを使ってみる

実際にVue Routerを使ってルーティングしてみます。

Vue Routerを後から追加したプロジェクトへのルーティング設定をする

Vue Routerを後から追加したプロジェクトに対して、ルーティングの設定を行ってみます。
設定後のディレクトリやファイルの配置は、下記のようになりました。
Vue Routerのテストで作成したプロジェクト

ルーティング確認用のコンポーネントを作成する

最初にルーティングのテストのために2つのコンポーネントを作成します。
下記の2つのコンポーネントを作成しました。

RouterTestFirst.vueという名前で、最初に下記のコンポーネントを作りました。

<template>
  <div>
    <h2>テストページ1</h2>
    <router-link to="/second">次のページ</router-link>
  </div>
</template>

次にRouterTestSecond.vueという名前で、下記のコンポーネントを作成しました。

<template>
  <div>
    <h2>テストページ2</h2>
    <router-link to="/">前のページ</router-link>
  </div>
</template>

RouterTestFirst.vueはトップページにする予定のページで、RouterTestSecond.vueは画面遷移先のページです。

それぞれタグの中にrouter-linkタグを使っていますが、これがVue Routerで画面遷移する時に使用するタグになります。
to属性にルーティングファイルに定義したパスを書くと、クリックした時に遷移してくれます。
このようにページ内のリンクの場合はrouter-linkタグを使用して、画面リロードが走ることなく画面遷移が行われます。

ルーティングファイルを作成する

routerというディレクトリを作成して、配下にindex.jsファイルを作成します。
このindex.jsファイルにルーティング情報を記載します。

ルーティングは「URLのxxxにアクセスしたらxxxコンポーネントを表示する。」といった定義を行います。

import { createRouter, createWebHistory } from 'vue-router'
import RouterTestFirst from '@/components/RouterTestFirst.vue'
import RouterTestSecond from '@/components/RouterTestSecond.vue'

const routes = [
  {
    path: '/',
    name: 'routerTestFirst',
    component: RouterTestFirst
  },
  {
    path: '/second',
    name: 'routerTestSecond',
    component: RouterTestSecond
  }
]

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

export default router

最初にimport文でVue RouterのcreateRouter, createWebHistoryを呼んできています。
ルーティングを作成するときに使用する機能です。

次に作成したコンポーネントを2つ読み込んできています。
ルーティングを定義するときに使用します。

routes配列を作成しています。
この配列にルーティングを定義しています。

pathにURLを定義して、nameは適当な名前を決めて書いておきます。
componentには作成したコンポーネントを定義します。

こうすることで、上記の配列定義は下記の意味になります。

・`/`にアクセスされたら`RouterTestFirst`コンポーネントを使用する
・`/second`にアクセスされたら`RouterTestSecond`コンポーネントを使用する

作成した配列をcreateRouterに渡すと、ルーティングの準備が完了です。
historyには履歴モードを指定しています。今回はHTML5モードです。
詳細は公式のこちらに記載されています。

routerを使う設定を行う

createAppでVueをマウントする際に、下記のようにuseに作成したrouterを指定します。
これでVue Routerが使用できるようになります。

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

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

Vue Routerを表示する

作成したVue Routerを表示するために、App.vueを下記のように修正しました。

<template>
  <router-view />
</template>

<script>
export default {
  name: 'App',
}
</script>

router-viewタグを使用しています。
これを書くことで、ルーティング設定した内容がアクセスするURLによって、画面に展開されます。

/にアクセスすると、RouterTestFirstコンポーネントが展開されて、/secondにアクセスすると、RouterTestSecondコンポーネントが表示されるといった感じです。

Vue Routerの動作を確認する

トップページにアクセスすると、作成したRouterTestFirst.vueが表示されました。

router-linkで作成したリンクをクリックすると、下記のようにページ遷移していることが確認できました。
URLもページ遷移時に変わっていることが確認できます。

追加したVue Routerの動作確認

プロジェクト作成時に追加した場合には?

プロジェクト作成時に選択して、Vue Routerを追加した場合は既に簡単なルーティングの設定がされた状態でプロジェクトが作成されます。
ディレクトリ構成が下記のようになります。
Vue CLIを使用してVue Routerを追加したとき

プロジェクトに最初からあるrouter/index.jsファイルにルーティングが書いてあります。
ファイルを開いてみると、下記のような感じになっています。
トップページにアクセスするとHomeViewが開いて、/aboutにアクセスするとAboutViewが使われるようになっています。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

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

export default router

実際にプロジェクトの初期状態で、動かしてみると下記のようにURLが切り替わってることが確認できます。

Vue CLIで追加したルーティングの確認

Nuxt.jsにはVue Routerは必要?

Nuxt.jsでは、Vue Routerを導入する必要はないです。
pagesディレクトリ配下にページのvueファイルを置くだけで、ルーティングを自動的に作ってくれます。

ルーティングファイルを書く必要がないので、ページの追加が沢山発生しそうなプロジェクトには、ファイルの競合が多発するかと思われるのでNuxt.jsの方が良さそうです。
「Vue + Vue Router」を使用する場合は、先にルーティングを書いておけば、チームでの競合やマージなど抑えれていいんじゃないでしょうか。

スクリプトで画面遷移するには?

スクリプト(プログラム)の方で画面遷移する方法については、下記の記事に記載したので参考にしてみてください。
単純な画面遷移だけではなく、URLパラメータまたはクエリパラメータを次の画面に渡す方法についても書いています。
Vue.jsのVue Routerを使用してプログラムで画面遷移する方法!
Vue.jsのVue Routerを使用しているプロジェクトで、プログラムを使用して画面遷移する方法を書いています。 最初に通常遷移する方法を記載していて、次にURLパラメータとクエリパラメータを渡して、画面遷移する方法を書いています。 V...

コメント

タイトルとURLをコピーしました