Nuxt开放链接到模态 [英] Nuxt open link into modal

问题描述

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

I'm building a Nuxt application that has a list of products and clicking on one of them open a dedicated page of the product. It is working fine.

结构为:

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

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

Now I wish to add a new feature:

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

我想要实现的一个很好的例子是 Youpic 的照片目录.

A nice example of what I wish to achieve is the photo directory of Youpic.

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

A list of "products", visible entirely in a dialog with its internal navigation.

我正在查看各种 nuxt路由和

I'm looking at the various nuxt-routing and vue-router documentations to try developing it but I'm still far away from the solution.

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

This small portion of the code I see here looks pretty similar at what I need but I don't understand how should I correctly implement it and how to create my nuxt custom routing:

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'
        }
      })
    }
  }
}

推荐答案

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

I have built a sandbox solution for you here: https://codesandbox.io/s/reverent-leftpad-xj81p

该解决方案使用 vue-router 中的 beforeRouteLeave()函数，默认情况下，该函数可用于您的nuxt页面:

The solution uses beforeRouteLeave() function from the vue-router which is available to your nuxt pages by default:

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

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

This function interrupts any route changes on the featured page before they happen, and if the target route is the route of the product detail (which means someone clicked on product link), it opens the modal dialog instead.

要处理打开和关闭模式时的url更改，请使用 window.history 对象:

To handle the url change on opening and closing of the modal, the window.history object is used:

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示例完全一样.

Try to play around a bit, it should work exactly like the youpic example you provided.

注意:示例中没有使用真正的模态"，为简单起见，整个示例都尽可能基本.

这篇关于Nuxt开放链接到模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！