时间戳

首页 > 解决方案 > 平底锅上的 Nuxt 链接而不是点击？

vue.js - 平底锅上的 Nuxt 链接而不是点击？

问题描述

常规nuxt-link通过单击链接在页面之间导航。我想知道我是否可以通过平底锅触发跨页面路由的相同操作，而不是单击链接！

看起来像这样的东西（我正在使用hammerjs）：

sliderManager.on("pan", function(e) {
    // trigger nuxt-link click and routes me to another page
})

典型nuxt-link：

<nuxt-link to="/about">About</nuxt-link>

本质上，我希望通过滑动导航到我的关于页面。

标签： vue.jsnuxt.js

解决方案

Nuxt 将 Vue Router 实例公开为$router，因此您可以使用$router.push()导航到链接的to. 使用ref访问<nuxt-link>回调中的链接。

<template>
  <nuxt-link ref="myLink" to="/about">About</nuxt-link>
</template>

<script>
export default {
  async mounted() {
    await this.$nextTick()

    //...

    sliderManager.on("pan", () => {
      sliderManager.off("pan")

      this.$router.push("/about")

      // OR
      this.$router.push(this.$refs.myLink.to)
    })
  }
})
</script>

推荐阅读