Vue RouterはVueアプリケーションで複数のURLをアプリケーションに導入してView(ページ)を作成する場合に使います。
Vue Cliからインストールする場合
Vue CLI(コマンドラインインターフェイス)を使う場合はアプリを作成するときにVue Routerをインストールするにチェックをするだけで勝手にインストールしてくれます。
npmでインストールする場合
npm install vue-router@4
yarnでインストールする場合
yarn add vue-router@4
main.jsにRouterを追加
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; const app = createApp(App); app.use(router); app.mount("#app");
Routerディレクトリを作成
routerフォルダーをsrcフォルダの直下に作成します。その中にindex.jsを作成してrouterのコンフィグレーションを書いていきます。ファイル名はindex.jsでなくてもOKです。
import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { 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/About.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
viewsディレクトリを作成
では、次に同じようにsrcディレクトリ直下にviewsをいう名前でフォルダーを作成しましょう。ここにページの枠組みとなるVueコンポーネントを作成していきます。
例でいうとAbout.vueとHome.vueになります。これでラウティングの設定が完了しました。あとはメニューバーなどを設置してユーザーを誘導させるようにすればよいですね。

router-linkとrouter-viewを設置
ではApp.vueに下記のようにコードを書き、ラウティングで指定したHome
とAboutにユーザーがアクセスできるようにしましょう。
その行先をクリックした際にViewを表示させるのが<router-view/>になります。
<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </template>

はい、上のようにメニューバーができて、クリックに応じてView(ページ)が変わりましたね。
これが基本的な使い方になります。