vue.js - Nuxt : Open component/page as modal with dedicated url like dribble. com

Question

在我的 Nuxt 应用程序中，我有一个属性列表，单击时我想打开相应的属性页面 (/properties/_slug.vue) 作为任何页面前面的模态用户已开启。

dribble.com是我尝试重新创建的功能的一个确切示例。

如果从 / 单击属性链接，url 应该是 /properties/slug-of-prop，当我点击关闭按钮或后退按钮时，它应该关闭模式并将 url 返回到单击之前的状态。此外，我希望能够访问 localhost:3000/properties/slug-of-prop 并让它显示 properties 列表，其中模态在前面

我的文件结构是:

/pages
--index.vue
--/properties
----index.vue
----_slug.vue

我已经尝试过此处列出的解决方案:https://stackoverflow.com/a/60793173/2232797但是，它不会删除点击后退按钮时的模态。此外，我还尝试实现这个 vue.js 解决方案 here通过使用中间件将 showModal 添加为我的路由的参数，但它使用的是 router-view 我真的很难理解它是如何工作的。

这是我的 /properties/index.vue 的样子:

<template>
  <section class="container-fluid">
    <!-- property cards -->
    <div class="info-row scroll-row border-bottom">
      <nuxt-link
        v-for="property in properties"
        :key="property"
        :to="`properties/${property.uid}`"
        tag="div"
      >
        {{ property.uid }}
      </nuxt-link>
    </div>
    <div v-if="showModal" class="modal-route">
      <div class="modal-content">
        <router-view></router-view>
      </div>
    </div>
  </section>
</template>

<script>
import { store } from '@/store/index.js'

export default {
  computed: {
    showModal() {
      return store.showModal
    },
  },
.....

谁能给我指出正确的方向？我显然是这方面的新手，所以非常感谢任何帮助!

Answer 1

有一种更简单的方法来处理这个问题，无需中间件的大惊小怪或手动扰乱历史记录。

我在这里创建了一个 CodeSandbox 项目，并尽量使其与您的设置相似:https://codesandbox.io/s/wizardly-knuth-rolrn .检查一下，它包含我将在一个工作示例中解释的所有内容。

您应该做的第一件事是查看 Nuxt Child .它基本上是 router-view，但专为 Nuxt 设计。

<div class="info-row scroll-row border-bottom"
  @click.prevent.stop
>
  <nuxt-link
    v-for="property in properties"
    :key="property.uid"
    :to="`/properties/${property.uid}`"
    tag="div"
    style="text-style: underline"
  >{{ property.uid }}</nuxt-link>
</div>
<div v-if="showModal" class="modal-route">
  <div class="modal-content">
    <nuxt-child></nuxt-child>
  </div>
</div>

这里有几个注释:

• 我添加了 @click.prevent.stop 来取消传播点击事件，这会触发卡片监听器
• 我在 to 前加上了/。丢失时，路由将附加到地址栏中已有的任何路由。
• 我已将您的 key 切换为 property.uid，因为它应该是唯一的。

nuxt child 工作的一件非常重要的事情:包含子元素的文件夹必须与父文件名同名。在这个例子中，我使用了 index.vue 和 index/。 Index.vue 是父路由，/index 中的所有内容都被认为是可以渲染的子路由。

这为您提供了如下文件夹结构:

/pages
  index.vue
  /index
    /properties
      _slug.vue

接下来要更改的是 showModal 方法。我正在使用 this.$route.matched.length 来确定是否有一个子组件。

computed: {
    showModal() {
      return this.$route.matched.length;
    }
}

slug 本身是这里最复杂的部分，这只是因为我实现示例监听器的方式。不过，我相信您还有其他一些方法可以处理此问题。

<template>
  <div ref="cardContainer" style="padding: 20px; border: 1px solid black" >I'm a card for property {{this.$route.params.slug }}</div>
</template>

<script>
export default {
  mounted() {
    // Attach listeners for handling clicks outside the card, while preventing propagation
    // of clicks in the cards
    this.$refs.cardContainer.addEventListener('click', this.stopPropagation)  
    document.body.addEventListener('click', this.closeModal)
  },

  beforeDestroy() {
    // Make sure to cleanup!
    this.$refs.cardContainer.removeEventListener('click', this.stopPropagation)  
    document.body.removeEventListener('click', this.closeModal)
  },

  methods: {
    // Prevent clicking inside the card from triggering the closeModal
    stopPropagation(e) {
       e.stopPropagation()
    },
    closeModal() {
      // You can also do this.$router.push('/') to preserve the history
      this.$router.replace('/')
    }
  }
}
</script>