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

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

解释解决方案：

该解决方案使用 vue-router 中的 beforeRouteLeave() 函数，默认情况下可用于您的 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 示例完全一样。

注意：示例中没有使用真正的“模态”，为了简单起见，整个示例尽可能基本。

Answer 2

在遇到与您几乎相同的情况后，我最近实现了此功能。至少在我的情况下，我真的想多了。

我所做的只是获取单个资源页面（在您的情况下是 /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;
    }
}
};

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 你可以看到的页面。

希望对你有帮助！！

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