Nuxt打开到模态的链接

Question

我正在构建具有产品列表的Nuxt应用程序，然后单击其中一个打开产品的专用页面。运行正常。

结构是：

/pages/featured // directory of products
/pages/product/:id/:slug // Dedicated product page

现在我想添加一个新功能：

• 如果从非产品目录的页面上单击或如果人们直接登陆该产品，我希望保留该产品的专用页面；
• 显然，如果从目录中单击，我希望在目录顶部打开产品的几乎全屏对话框；
• 在对话框上保留路由更改。

我希望实现的一个很好的例子是Youpic的照片目录。

“产品列表”，在带有内部导航的对话框中完全可见。

[我正在查看nuxt-routing和vue-router的各种文档以尝试进行开发，但距离解决方案还差得远。

我在这里看到的一小段代码看起来与我所需的代码非常相似，但是我不明白如何正确实现它以及如何创建我的nuxt自定义路由：

export default {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        path: '/users/:id',
        components: {
          default: resolve(__dirname, 'pages/users'), // or routes[index].component
          modal: resolve(__dirname, 'components/modal.vue')
        },
        chunkNames: {
          modal: 'components/modal'
        }
      })
    }
  }
}

任何帮助/示例/解决方案将不胜感激。谢谢

Answer 1

我在面对几乎相同的情况后最近实现了此功能。至少就我而言，我真的过分考虑了。

我所做的只是获取单个资源页面（在您的情况下为/ pages / product /：id /：slug），默认情况下将其设为模式页面。我正在使用vuetify，而v-dialog是模态。 nuxt项目层次结构没有改变。相当于slug.vue页面。

<template>
<v-dialog v-model="drawer" fullscreen hide-overlay transition="dialog-bottom-transition">
    <v-card height="100vh">
        <div class="flex">
            <v-toolbar dark color="primary darken-2">
                <v-btn icon dark @click="close">
                    <v-icon>close</v-icon>
                </v-btn>
                <v-toolbar-title>{{member.alias}}</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-toolbar-items>
                    <v-btn text nuxt :to="`/members/${member.id}/notes`">Notes</v-btn>
                    <v-btn text nuxt :to="`/members/${member.id}/edit`">Edit</v-btn>
                    <v-btn text nuxt :to="`/members/${member.id}/payments`">Payments</v-btn>

                </v-toolbar-items>
            </v-toolbar>
            <v-row no-gutters>
            </v-row>
        </div>
    </v-card>
</v-dialog>
</template>

<script>
import { mapGetters } from "vuex";
export default {
watchQuery: ["id"],
transition(to, from) {
    if (!from) {
        return "slide-left";
    }
    return +to.query.id < +from.query.id ? "slide-right" : "slide-left";
},
data() {
    return {
        id: this.$route.params.id,
        drawer: true
    };
},
fetch({ store, params }) {
    store.commit("members/active", params.id);
},
computed: {
    member: {
        get() {
            return this.$store.getters["members/active"];
        },
        set(member) {
            this.$store.commit("members/update", {
                id: member.id,
                member: member
            });
        }
    }
},
methods: {
    async close() {
        await this.$nuxt.$router.go(-1);
        this.drawer = false;
    }
}
};