vue3におけるvue-routerの使い方をまとめた

javascript

本記事では、vue3でvue-routerを使用してルーティング機能を実施する方法について解説します。

vue-routerを使用してルーティング機能を実装したい方は参考にしてみてください!

vue-routerをインストールする

まずはpackage.jsonに下記を記述します。

"dependencies": {
    "vue": "^3.3.4", 
    .....,
    "vue-router": "^4.0.13"
  },

本記事ではvueはversion 3.3.4、vue-routerはversion 4.0.13を使用しています。最新バージョンが更新されていて、下記手順で動かなかった場合は、バージョンを4.0.13に落として試してみてください!

「npm i」でvue-routerをインストールしましょう!

vue-routerでルーティング機能を実装する

vue-routerのimportとルーティングの作成

vue-routerのimportは、基本的にはrouter.jsを新たに作成して行います。今回は、src配下にrouterディレクトリを作成し、index.jsを作成します。index.jsには、main.jsに読み込ませるルーティングを記載していきます(main.jsについては後々説明します)。

続いて、index.jsと同じ階層にcontent.jsを作成します。ここにはルーティングとルーティングに対応するviewファイルを記載していきます。

このように、routerディレクトリを作成してそこにルーティング関係のファイルを入れておくことで、管理しやすくなります。

import {createRouter, createWebHistory } from "vue-router";
import Content from "./content";

const routes = Content.routes;

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

export default router;

実際のルーティングはcontent.jsに書いて、routesとしてimportしています。content.jsの書き方は以下になります。

export default {
  routes: [
    {
      path: "/",
      name: "TopPage",
      component: () => import("@/views/TopPage.vue"),
      meta: {
        title: "top_page",
        desc: "top_page",
      }
    },
    {
      path: "/profile",
      name: "Profile",
      component: () => import("@/views/HelloWorld.vue")
    }
  ]
};

viewファイルを追加したら、ここに配列として追加していきます。

pathにはエンドポイントを追加して、componentに表示したいviewファイルを追加していきます。

nameは任意の値ですが、ルーティングを実現する際に指定する名前になります。どのページに飛ぶのか分かり易い名前にしておくことが重要です。

main.jsにvue-routerの設定を取り込む

vueではアプリケーションに接続した場合、まずmain.jsにアクセスされます。そのため、上記で作成したvue-routerの設定をmain.jsにimportする必要があります。

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

createApp(App).use(router).mount("#app");

use(router)で先ほど作成したrouterをAppにマウントします。

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

Appには上記のようにプログラムを作成します。

<router-view />をAppのtemplate内に作成することで、アプリ全体にルーティングを反映させることができます。

viewファイル内にルーティング処理を作成する

content.jsがこのようになっているとします。

export default {
  routes: [
    {
      path: "/",
      name: "TopPage",
      component: () => import("@/views/TopPage.vue"),
      meta: {
        title: "top_page",
        desc: "top_page",
      }
    },
    {
      path: "/profile",
      name: "Profile",
      component: () => import("@/views/Profile.vue")
    }
  ]
};

ここで、/profileにいるときにTopPageへ移行したい場合は、下記の処理で移行できます。

<router-link to="TopPage">Go to top</router-link>

こうすることで、ルートページに移行することができ、src/views/TopPage.vueの中身が表示されます。

vue-routerの仕組みまとめ

以上、vue-routerの使い方について説明しました。

この記事を見て、ルーティングの使えるようになってもらえたら嬉しいです。

コメント

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