Vuetifyを使った開発 4 ~プロジェクトに後からVue Routerを追加・設定する~

import { createRouter, createWebHistory } from "vue-router"
import Salary from '../components/Salary.vue'
import Home from '../components/Home.vue'

const routes = [
    {
        path: '/', component: Home
    },
    {
        path: '/salary', component: Salary
    }
]

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

export default router

import vuetify from './vuetify'
import router from '../router/index'

import type { App } from 'vue'

export function registerPlugins(app: App) {
  app.use(vuetify).use(router)
}

<!-- App.vue -->
<template>
  <v-app>
    <MyBar @drawer-change="updateDrawerStatus" />
    <MyNavigation :drawer="isOpen" />
    <v-main>
      <RouterView />
    </v-main>
  </v-app>
</template>

<!-- MyNavigation.vue -->
<template>
    <v-navigation-drawer :width="180" v-model="props.drawer" color="secondary" permanent>
        <v-list-item title="Navigation" subtitle="title"></v-list-item>
        <v-divider></v-divider>
        <v-list-item prepend-icon="mdi-home" link to="/" title="Home"></v-list-item>
        <v-list-item prepend-icon="mdi-cog" link to="/salary" title="Salary"></v-list-item>
    </v-navigation-drawer>
</template>

// src/router/index.ts
const routes = [
    {
        path: '/', name: 'home', component: Home
    },
    {
        path: '/salary', name: 'salary', component: Salary
    }
]

<!-- MyNavigation.vue -->
<v-list-item prepend-icon="mdi-home" link :to="{ name: 'home' }" title="Home"></v-list-item>
<v-list-item prepend-icon="mdi-cog" link :to="{ name: 'salary' }" title="Salary"></v-list-item>

// src/router/index.ts
const routes = [
    {
        path: '/', name: 'home', component: Home
    },
    {
        path: '/salary',
        component: Salary,
        children: [
            {
                path: '',
                redirect: '/salary/test1'
            },
            {
                path: 'test1',
                name: 'test1',
                component: MyMain
            }, {
                path: 'test2',
                name: 'test2',
                component: MyTest
            }
        ]
    }
]

<!-- Salary.vue -->
<template>
    <div>Salary</div>
    <v-container grid-list-md>
        <v-row>
            <v-col>
                <v-btn :to="{ name: 'test1' }">test1</v-btn>
            </v-col>
            <v-col>
                <v-btn :to="{ name: 'test2' }">test2</v-btn>
            </v-col>
        </v-row>
    </v-container>
    <v-divider></v-divider>
    <RouterView />
</template>