Vue3系 v-router 使い方

はじめに

rails勉強して半年の初学者です
今回、vue３系を使ってアプリを作成する中で
２系の記事が多いなと思ったので、
今回は、３系での使い方をお伝えできればと思います。
至らぬ点あるかと思いますが、頑張ります

vue-router編

開発環境

rails:6.1.5
ruby:3.0.0
vue:3.2.31
vue-router:4.0.14

インストール

まずはインストール(yarnを使っています）

コンソール

yarn add vue-router

実装例

例として、トップ画面(/topにアクセスした時)を作ります。

app/javascript/pages/top/index.vue

<template>
  <div class="text-center">
    <h3>タスクを管理しよう！</h3>
      <p>生活や仕事に関するタスクを見える化して抜け漏れを防ぎましょう。</p> 
  </div>
</template>
<script>
export default {
  name: "TopIndex",
}
</script>

トップ画面を表示するルーテングの設定

app/app/javascript/router/index.js

import { createWebHistory, createRouter } from "vue-router";　 
import RegisterIndex from '../pages/top/index.vue'

const routes = [
    {
      path: '/top',
      component: TopIndex,
      name: "TopIndex"
    },
];

const router = createRouter({ 
  history: createWebHistory(),
  routes,
});
export default router

vueインスタンスに変数routerを渡す

app/javascript/packs/hello_vue.js

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

document.addEventListener("DOMContentLoaded", () => {
    const app = createApp(App);
    app.use(router).mount("#app")　
});

作成したルートを読み込むリンクを追記します

//app/javascript/app.vue

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

これで、/topにアクセスすると、topindex.vueの内容が表示されるはず！

公式サイト

vue-router