Nuxt 打开链接到模态

Posted 2023-02-22

【中文标题】Nuxt 打开链接到模态

【英文标题】：Nuxt open link into modal

【发布时间】：2020-06-26 18:08:28

【问题描述】：

我正在构建一个包含产品列表的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'
        
      )
    
  

【问题讨论】：

向该模式添加 iframe 并在其中导航怎么样？

您最终找到了一个好的解决方案吗？我一直在尝试解决完全相同的问题。

【参考方案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 示例完全一样。

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

【讨论】：

为这个例子和解释干杯，！它工作得很好！干杯！

效果很好，一件小事，点击浏览器后退按钮时是否有任何钩子/事件？

我遇到了使用popstate的后退按钮问题

【参考方案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 >
        <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;
    

;

【讨论】：

谢谢，我会尽快尝试并通知您！

不幸的是，这并没有像我预期的那样工作....../featured 页面丢失了所有内容，我希望准确地模仿 Youpic 为他们的画廊所做的事情。谢谢！

如果这是 :slug 的内容，它应该对 feature 的内容没有任何影响。

【参考方案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 你可以看到的页面。

希望对你有帮助！！

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

【讨论】：

你明白了，但我想看一些例子，因为这样，老实说，我不知道我该怎么办......我已经为每个产品使用了nuxt-link特色页面，但它落在该页面上......我需要模式位于探索页面的顶部，并更改其 URL。完全像youpic/explore。最好有一个关于我应该如何配置这 2 个页面和路由的示例......谢谢！

您的代码在线工作了吗？或者可以加代码在线工具吗？？