javascript - 单击链接，运行功能然后重定向

Question

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

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

标签： javascriptvue.jsnuxt.js

Answer 1

基于Nuxt 中提供的答案：如何防止 nuxt-link 转到另一个页面？，您可以添加event=""到您的链接以防止其导航。

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

例如

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

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