单击链接，运行功能然后重定向[关闭]

【问题标题】：Click on link, run function then redirect [closed]单击链接，运行功能然后重定向[关闭]
【发布时间】：2021-07-01 23:38:10
【问题描述】：

我在一个页面上有三个 nuxt 链接。通过单击每个链接，调用一个方法，该方法返回一个作为某些计算结果的字符串。此字符串应设置为 :to 中的查询。

在该方法完成之前，页面重定向到一个新地址。在计算新查询之前有什么方法可以防止重定向？

【问题讨论】：

【解决方案1】：

根据Nuxt: how to prevent nuxt-link goes to another page? 中提供的答案，您可以将event="" 添加到您的链接以防止其导航。

然后你可以添加一个 native 点击处理程序来计算适当的查询字符串并将新路由推送到路由器。

例如

<NuxtLink
  to="/foo"
  event=""
  @click.native="calculateQueryParams('/foo')"
>
  Foo
</NuxtLink>

methods: {
  calculateQueryParams(path) {
    const query = {
      foo: performance.now(),
    }
 
    this.$router.push({ path, query })
  },
},

【讨论】：