Nuxt开口连接到模态

Question

我正在构建一个具有产品列表的努克斯特应用程序，然后单击其中一个，打开产品的专用页面。它很好用。

结构如下：

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

现在我想增加一个新特性：

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

我想要实现的一个很好的例子是尤皮克的照片目录。

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

我正在查看各种nuxt路由和vue-路由器文档来尝试开发它，但我仍然离解决方案很远。

我在这里看到的这一小部分代码在我需要的内容上看起来非常相似，但我不明白如何正确地实现它，以及如何创建我的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

我在这里为您构建了一个沙箱解决方案：https://codesandbox.io/s/reverent-leftpad-xj81p

解释解决办法：

该解决方案使用来自beforeRouteLeave()的vue-router函数，默认情况下，nuxt页面可以使用该函数：

beforeRouteLeave(to, from, next) {
  if (to.name === "product-id") {
    this.displayProductModal(to);
  } else {
    next();
  }
},

此函数在功能页面发生更改之前中断任何路由更改，如果目标路由是产品详细信息的路由(这意味着有人单击了产品链接)，则会打开模态对话框。

为了处理模式打开和关闭时的url更改，使用了window.history对象：

displayProductModal(route) {
  this.activeModal = route.params.id
  window.history.pushState({}, null, route.path)
},
hideProductModal() {
  this.activeModal = null
  window.history.pushState({}, null, this.$route.path)
}

试着玩一下，它的工作应该与你提供的youpic例子完全一样。

注意:在示例中没有使用真正的"modals“，为了简单起见，整个示例尽可能基本。

Answer 2

我最近实现了这个功能后，面对几乎相同的情况，您所处的。至少在我的情况下，我真的是想得太多了。

我所做的就是使用单个资源页面(/ page /product/:id/:slug，在您的例子中)，默认情况下它是一个模式。我使用的是vuetify和v-对话框是一种模式。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;
    }
}
};

Answer 3

我对您的需求的理解是查看https://youpic.com/explore，您需要https://www.example.com/featured (directory of products)路由，在点击产品时，您需要打开对话框，它将是全屏的，路由为https://www.example.com/product/:id/:slug (Details page)。

如果我错了，请纠正我！！

现在，您可以通过2种方式实现这一点。

1)在点击每个产品(即https://www.example.com/featured (directory of products)路由)时，使用nuxt-link并将其重定向到https://www.example.com/product/:id/:slug (Details page)路由

2)在单击每个产品(即https://www.example.com/featured (directory of products)路由)时，使用router.push和打开对话框手动更新路由。

现在，如果我们看到https://youpic.com/explore，让我们把它作为Nuxt代码结构，它将是pages/explore，他们用router.push手动更新路由到https://youpic.com/image/16660875/steffi-by-fs22photography，但是当您共享/接受这个URL(https://youpic.com/image/16660875/steffi-by-fs22photography)并尝试打开它时，您必须在Nuxt code structure中维护pages/image/:id/:slug，这实际上是一个页面，如果您直接看到到https://youpic.com/image/16660875/steffi-by-fs22photography页面，就可以看到。

希望这能帮到你！！

如果您有任何疑问，我们可以讨论更多！！