Nuxt3(Vue3) で URL クエリに応じてモーダルを表示する方法
Google フォトのブラウザ版のように、URLのクエリによってモーダルを表示・非表示する方法。
Google フォトのブラウザ版のように、URLのクエリによってモーダルを表示・非表示する方法。
app.vue
<template>
<!-- モーダルを表示 (URLにクエリを付加する) -->
<NuxtLink to="/?view=1234">モーダル表示</NuxtLink>
<!-- モーダル -->
<div v-if="isShowModal" @hide="hideModal">
…
</div>
</template>
<script lang="ts" setup>
const route = useRoute();
const router = useRouter();
// URLクエリからViewIDを取得する
const viewID = computed(() => route.query[`view`]?.toString());
// URLクエリにViewIDが指定されていればモーダルを表示する
const isShowModal = computed(() => viewID.value !== undefined);
/** モーダルを閉じる */
function hideModal() {
// URLクエリからViewIDを削除することでモーダルを非表示にする
router.push(`/`);
}
</script>localhost:3000/?view=1234 のような感じでアクセスするとモーダルが表示されます。ブラウザバックもしくは localhost:3000 に移動すればモーダルが消えてくれます。
おまけ１：モーダルをフェードアニメーション(transition)する方法
app.vue
<template>
<!-- モーダルを表示 (URLにクエリを付加する) -->
<NuxtLink to="/?view=1234">モーダル表示</NuxtLink>
<!-- モーダル -->
<transition name="fade"> <!-- 👈 追加 -->
<div v-if="isShowModal" @hide="hideModal">
…
</div>
</transition> <!-- 👈 追加 -->
</template>
<script lang="ts" setup> … 省略 … </script>
<!-- 👇 追加 -->
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>template 内に <transition name="fade"></transition> を追加と、style 内に transition の設定を追加します。