Nuxt 3：以模态方式打开路线

Question

这就是我想要实现的目标：

pages/index.vue：

<nuxt-link to="/subpage/a">A</nuxt-link>
<nuxt-link to="/subpage/b">B</nuxt-link>
<nuxt-link to="/subpage/c">C</nuxt-link>

然后，当单击这些子页面链接之一时，我希望它在当前页面顶部打开一个模式，并将页面加载到组件 Modal.vue 中。

组件/Modal.vue

<div class="modal">
  This is subpage {{ id }}
</div>

我需要成为 nuxt-links，因为我需要能够直接深层链接到其中一个子页面。

我该怎么办？我可以使用嵌套的 NuxtPage 吗？

如有任何帮助，我们将不胜感激！

Answer 1

在你的pages/index.vue中像这样的东西怎么样：

<template>
<div>
    <nuxt-link to="/subpage/a">A</nuxt-link>
    <nuxt-link to="/subpage/b">B</nuxt-link>
    <nuxt-link to="/subpage/c">C</nuxt-link>

    <Modal v-if="isModalOpen" @close="closeModal">
    <router-view />
    </Modal>
</div>
</template>

<script>
import Modal from '~/components/Modal.vue';

export default {
components: {
    Modal,
},
data() {
    return {
    isModalOpen: false,
    };
},
methods: {
    openModal() {
    this.isModalOpen = true;
    },
    closeModal() {
    this.isModalOpen = false;
    },
},
};
</script>