NuxtLink

페이지를 이동할 수 있는 태그이다. 마치 HTML에서 anchor 태그와 비슷한 역할을 한다. 그리고 vue-router에서 router-link 태그랑도 비슷하다!

// layouts/default.vue

<template>
  <div>
    <header>
      <h1>{{$route.name}} page</h1>
      <NuxtLink to="/">Home</NuxtLink>
      <NuxtLink to="/main">Main</NuxtLink>
      <NuxtLink to="/product">Product</NuxtLink>
    </header>
    <Nuxt/>   
  </div>
</template>

<script>
export default {
  name:"defaultView",
  created() {
    console.log(this.$route)
  }
}
</script>

NuxtLink와 router-link와의 차이점

Built-in Components

What is the advantage of using nuxt-link over router-link?

nuxt-link는 router-link의 확장 버전이라고 보면 된다. nuxt-link의 경우에는 smart prefetching을 통해서 페이지 컴포넌트 간의 라우팅 효율을 높일 수 있다. 넉스트는 자동으로(vue3는 prefetch의 default 값이 false이다) 페이지들을 미리 받아오는(pre-fetch) 방식을 사용하는데, 따라서 페이지 컴포넌트 이동하게 되면 그때마다 이미 완성되어 있는 페이지를 볼 수 있으 퍼포먼스 상 유리하다. 이를 smart prefetching이라 한다.

anchor tag를 사용하지 않는 이유

anchor tag를 사용하여 페이지를 이동할 경우 해당 url의 데이터를 서버로 전송해서 받아 온다. 따라서 새로 고침이 일어나 페이지가 한 번 갈아엎어진다. 이 방법은 SPA를 제대로 사용하는 방식이 아니다.

NuxtLink를 사용하면 페이지에 필요한 정보들을 미리 prefetch하여 가져와 사용하는 클라이언트 사이드 라우팅을 사용게 된다. 따라서 사용자 입장에서 더 빠른 사용자 경험을 줄 수 있게 된다.

하지만 만약 외부 url에 접근하게 되면 anchor 태그를 사용해야 하겠지… (https://copyprogramming.com/howto/nuxt-link-to-external-url-adding-slash-before-url)