skip to Main Content

So I have a list of objects each rendered in a list. At the same time, each list element should redirect to a specific route on click:

<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>

As you can see, there is a click handler for each row click, the handler is the following:

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

Now I am unsure which navigation method to use; whether using <NuxtLink> or programatically via this.$router.push.

The main reason I would keep the programatic navigation is simply because I do not know any other way to trigger page change on row click. On the other hand, I am afraid I would lose SEO advantages of <NuxtLink> Tag.

2

Answers


  1. <nuxt-link> is basically a <router-link>, so it should have 0 benefit SEO-wise over the Vue variant.

    As of what to use in your case, it’s more a matter of button vs a:href. If you want to navigate to another page, it should be a link.

    More details in this article: https://www.smashingmagazine.com/2019/02/buttons-interfaces/

    Login or Signup to reply.
  2. Other advantages when using nuxt-link Nuxt can automatically prefetch pages with the prefetchLinks and prefetchPayloads options.

    prefetchlinks

    prefetchpayloads

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search