Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<v-app>
<component :is="layoutComponent">
<template v-if="route.meta.keepAlive">
<KeepAlive>
<RouterView />
</KeepAlive>
</template>
<template v-else>
<RouterView />
</template>
</component>
<Loading />
</v-app>
</template>
<script setup lang="ts">
// region Dependency Injection
import {computed} from 'vue'
import {useRoute} from 'vue-router'
import { useAuth } from '@/composables/useAuth'
// endregion Dependency Injection
// region Component Injection
import DefaultLayout from "@/layouts/DefaultLayout.vue";
import AuthLayout from "@/layouts/AuthLayout.vue";
import Loading from "@/components/app/Loading.vue";
// endregion Component Injection
// region interface
// endregion interface
// region constants
const route = useRoute()
const { isLoggedIn } = useAuth()
const layouts = {
default: DefaultLayout, // ログイン時レイアウト
auth: AuthLayout, // ゲスト用レイアウト
}
//
// const layouts = {
// default: DefaultLayout,
// auth: AuthLayout
// } as const
// endregion constants
// region props
// endregion props
// region variable
// endregion variable
// region properties
// endregion properties
// region emits
// endregion emits
// region validator
// endregion validator
// region methods
// const layoutComponent = computed(() => {
// const key = (route.meta.layout as keyof typeof layouts)?? 'default'
// return layouts[key]?? DefaultLayout
// })
const layoutComponent = computed(() => {
const metaLayout = (route.meta.layout as string) || 'default'
// 共用ページは自動切替
if (metaLayout === 'auto') {
return isLoggedIn.value ? DefaultLayout : AuthLayout
}
// 明示指定（'default' or 'auth'）
return metaLayout === 'auth' ? AuthLayout : DefaultLayout
})
// endregion methods
// region export
// endregion export
</script>
<style scoped>
</style>
|