Nuxt3とVuetify3を使ったページ遷移の実装

サンプルイメージ

ヘッダー右端のREGISTERボタンをクリックすると...

別ページの画面へ遷移する方法を紹介します。

ページ遷移するための実装はこれ

@clickディレクティブに、"$router.push('遷移したいページのパス')"を実装するだけで、ページ遷移することができます。

下記にサンプル例を載せておきます。

sample.vue

<v-btn type="button" @click="$router.push('/registration/registration')">Register</v-btn>

全体のコード

frontend/components/navbar/navbar.vue

<script setup lang="ts">

</script>

<style>

</style>

<template>
    <v-card>
        <v-layout>
            <v-app-bar color="primary">
                <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
                <v-toolbar-title>My Todo Task</v-toolbar-title>
                <template v-if="$vuetify.display.mdAndUp">
                    <v-btn icon="mdi-magnify" variant="text"></v-btn>
                    <v-btn icon="mdi-filter" variant="text"></v-btn>
                </template>
                <v-btn type="button" @click="$router.push('/registration/registration')">Register</v-btn>
            </v-app-bar>
        </v-layout>
    </v-card>
</template>

参考にしたサイト