Nuxt-link 延迟过渡到新页面？答案

【问题标题】：Nuxt-link delay transition to new page?Nuxt-link 延迟过渡到新页面？
【发布时间】：2020-10-17 11:33:09
【问题描述】：

这是对#1458 的跟进。我正在寻找有关 Nuxt 期望如何处理此问题的方向。

我有一个菜单。当我单击菜单中的 nuxt 链接时，我希望有时间在页面转换发生之前关闭菜单。问题是，我只希望在您单击菜单中的 nuxt-link 时发生这种情况，而不是每次我去某个路线时（如上一期描述的在路线上使用中间件）。

所以有几种不同的方式可以做到这一点，我很好奇“Nuxt”方式是什么？

我们目前这样做的方式，禁用 nuxt-link 并捕获点击，然后执行 router.push()。

<nuxt-link :to="path" event="disabled" @click.native="delayLoad"/>

// Methods
delayLoad(event) {
     this.$store.commit("CLOSE_MENU")

     setTimeout(()=>{
        this.$router.push(event.target.pathname)
    }, 2000)
}

这是个好主意吗？我总是讨厌像这样劫持 nuxt-link 和浏览器导航。看起来很笨拙。

我们使用的其他想法是在 nuxt-link 上使用查询参数，然后在中间件中使用它来延迟页面转换。这对我来说似乎更糟，因为现在我的 URL 中有一个用于动画的查询参数，这似乎是在滥用查询参数。这也触发了页面加载进度条，这并不是真正的意图，它是让一个序列动画发生，然后页面加载。

在我看来，也许 nuxt-link 应该有一个延迟属性，或者页面转换配置应该允许延迟（就像它对持续时间所做的那样）？

【问题讨论】：

标签： vue.js nuxt.js transition

【解决方案1】：

由于 nuxt-link 本质上是 vue 的 router-link 的包装版本，如果您查看该文档，则有一个事件属性接受 string 或 string[]，请在此处查看它的源代码：@987654321 @ 你可以看到它会在这种情况下为disabled 注册一个监听器。传递一个空数组以便不注册任何事件侦听器可能更有意义，但这是以可读性为代价的。

否则，@click.native 是处理 router-link 的自定义点击处理程序的建议方法（请参阅：https://github.com/vuejs/vue-router/issues/800#issuecomment-254623582）。

我能想到的唯一其他问题是如果您快速连续单击 2 个不同的链接会发生什么，以及如果您多次单击会发生什么。可能只想添加一个变量来跟踪是否已单击链接以防止多次触发setTimeout，这可以将您从页面A导航到B，然后导航到C，就像所有timeouts一样>将在没有取消的情况下触发。或者您可能只想导航到单击的“最后一个”链接，因此如果单击另一个链接，您将取消之前的setTimeout。这实际上是一个边缘案例，可能不会成为问题，但值得探索。

否则，IMO 对我来说看起来不错。这似乎是实现这一点的最简单方法，而无需创建自定义组件/插件。我不是专家，但很可能我也将如何实现此功能。很高兴看到延迟选项，因为我可以看到自己使用该功能以及 vuetify。

另一种可能的方法是在beforeTransition：https://nuxtjs.org/api/configuration-transition/ 中创建您的商店commit 虽然我不确定那里是否可以访问商店，但您可能还需要为此编写一个自定义插件。同样，对于一个简单的延迟动画来说，这似乎比它的价值要复杂得多。简单、有效的代码有时是最好的解决方案，即使它不是最可扩展的选项。

另见：How can I transition between two nuxt pages, while first waiting on a child component transition/animation to finish? 另一种处理方式。

【讨论】：

【解决方案2】：

我也想这样做，并提出了以下解决方案。使用新的slots api，您可以更优雅地自定义nuxt-link 行为：

<nuxt-link v-slot="{ route, href }" :to="path" custom>
  <a :href="href" @click.prevent="$emit('navigate', route)">
    <slot></slot>
  </a>
</nuxt-link>

这将使链接发出一个以路由为参数的导航事件。然后，您可以在包含菜单组件的任何位置监听此事件，如下所示：

<template>
  <transition
    name="fade"
    @after-leave="maybeNavigate"
  >
    <MainMenu
      v-if="menuIsVisible"
      @navigate="navigate"
    />
  </transition>
</template>

<script>
export default {
  data: () => ({
    menuIsVisible: false,
    navigateToOnMainMenuClose: null,
  }),
  methods: {
    navigate(route) {
      this.navigateToOnMainMenuClose = route
      this.menuIsVisible = false
    },
    maybeNavigate() {
      if (this.navigateToOnMainMenuClose) {
        this.$router.push(this.navigateToOnMainMenuClose)
        this.navigateToOnMainMenuClose = null
      }
    },
  },
}
</script>

每当您单击菜单中的导航链接时，都会存储路线并关闭菜单。菜单退出动画完成后，maybeNavigate() 将推送存储的路线，如果有的话。这消除了对setTimeout 的需要，如果您设法快速连续单击多个链接，则只会存储并导航到最后一个链接。

【讨论】：