Nuxt中通过方法生成跳转URL时nuxt-link无法正常重定向如何解决

核心问题 #

• 你的seeProduct是异步方法，返回值为Promise对象，<nuxt-link>的:to属性同步读取绑定值，无法识别Promise对象的返回结果
• 你获取到的跳转地址为站外链接，<nuxt-link>仅支持Nuxt应用内的路由跳转，本身不支持外部站点跳转

解决方案 #

方案一：预加载跳转地址（适配列表批量渲染场景） #

在获取商品列表数据时同步请求每个商品对应的跳转地址，存入数据属性后直接绑定到a标签的href属性即可：

<template>
  <!-- 外部链接使用原生a标签 -->
  <a :href="item.productUrl" target="_blank">
    <div>
      <span>Go to product</span>
    </div>
  </a>
</template>

<script>
export default {
  async asyncData() {
    // 原有逻辑：获取商品列表
    const itemList = await fetchYourItemList()
    // 新增逻辑：批量预请求每个商品的跳转地址
    for (const item of itemList) {
      const app = { $axios: this.$axios }
      const urlRes = await endPoint.getProduct(app, item.sku.product.id)
      item.productUrl = urlRes.url
    }
    return { itemList }
  }
}
</script>

方案二：绑定点击事件动态跳转（适配单次点击场景） #

不需要提前预加载所有地址，点击时再请求地址并手动触发跳转：

<template>
  <div @click="redirectToProduct(item.sku.product.id)" style="cursor: pointer">
    <span>Go to product</span>
  </div>
</template>

<script>
export default {
  methods: {
    async redirectToProduct(id) {
      const app = { $axios: this.$axios }
      const urlRes = await endPoint.getProduct(app, id)
      // 站外地址直接跳转
      window.location.href = urlRes.url
      // 如果需要新标签页打开，替换为：window.open(urlRes.url, '_blank')
      // 如果是应用内路由地址，替换为：this.$router.push(urlRes.url)
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者francky