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
<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
vsa: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/
Other advantages when using
nuxt-link
Nuxt can automatically prefetch pages with theprefetchLinks
andprefetchPayloads
options.prefetchlinks
prefetchpayloads