<Nuxt Link> 是否比程序化导航具有 SEO 优势？

Question

所以我有一个对象列表，每个对象都呈现在一个列表中。同时，每个列表元素都应该在点击时重定向到特定的路由：

<template>
  <b-container>
    <h1 v-if="error">{{error}}</h1>
    <b-table
      sort-icon-left
      borderless
      outlined
      v-else-if="coins"
      @row-clicked="coinRowClickHandler"
      selectable
      small
      :items="coins" 
      :fields="fields">
      <template #cell(coin)="data">
        <NuxtLink :to="`/${data.item.name}/dashboard`"><img :src="data.item.image" width="25" height="25"><b>{{data.item.name}}</b></NuxtLink>
      </template>
      <template #cell(current_price)="data">
        {{ formatDollar(data.item.current_price, 20, 2) }}
      </template>
      <template #cell(price_change_percentage_24h)="data">
        {{ formatPercent(data.item.price_change_percentage_24h) }}
      </template>
      <template #cell(market_cap)="data">
        {{ formatDollar(data.item.market_cap, 20, 0) }}
      </template>
    </b-table>
    <b-spinner v-else/>
  </b-container>
</template>

如您所见，每行点击都有一个点击处理程序，处理程序如下：

coinRowClickHandler: function(event) {
  console.log(event)
  this.$router.push(`/${event.name}/dashboard`)
}

现在我不确定要使用哪种导航方法；无论是使用<NuxtLink> 还是以编程方式通过this.$router.push。

我保留程序化导航的主要原因仅仅是因为我不知道在行点击时触发页面更改的任何其他方式。另一方面，我恐怕会失去<NuxtLink> Tag 的 SEO 优势。

Answer 1

<nuxt-link> 基本上是一个<router-link>，因此它应该比 Vue 变体在 SEO 方面具有 0 优势。

至于在您的情况下使用什么，更多的是button 与a:href 的问题。如果你想导航到另一个页面，它应该是一个链接。

更多详情见本文：https://www.smashingmagazine.com/2019/02/buttons-interfaces/

Answer 2

使用nuxt-link 时的其他优势 Nuxt 可以使用prefetchLinks 和prefetchPayloads 选项自动预取页面。

prefetchlinks

prefetchpayloads