vue/link-for-navigation

Why

A button that calls router.push('/pricing') is announced as a button, not a link, cannot be opened in a new tab, copied or middle-clicked, has no address on hover, and is not prefetched. Screen reader users who list the links of a page do not find it.

Fix

Use <RouterLink to="/pricing"> (Vue Router) or <NuxtLink to="/pricing"> (Nuxt), and style it as a button if the design wants one. Keep router.push and navigateTo for navigation that follows an action, such as after a form is saved.

Examples

<!-- bad -->
<button type="button" @click="router.push('/pricing')">See pricing</button>
<!-- good -->
<RouterLink to="/pricing" class="button">See pricing</RouterLink>

Sources

• Vue Router docs, Programmatic navigation (router.push is what RouterLink calls)
• Nuxt docs, Accessibility (links)
• Nuxt docs, NuxtLink

Read it in the terminal

npx github:dawidolko/frontend-skills explain vue/link-for-navigation