인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

nhs0912님의 프로필 이미지

작성한 질문수

[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터

NuxtLink 내장 컴포넌트

prefetching 질문

작성

·

21

0

<template>
  <div>
<q-page padding>
  <div class='text-center q-py-xl'>
    <div class='text-h4'>
      {{ $route.path }}
    </div>
  </div>
</q-page>
  </div>
</template>

<scipt lang='ts'>
//아래 문장을 추가해야 링크클릭 가능 
export default {
  
};
  console.log('prefetching-1');
  
</scipt>
<script setup lang="ts">

</script>

<style scoped>

</style>
  1. 일단 각 prefetching-1,2,3 vue파일에 script 부분에
    export default를 선언해야 강의로드맵 클릭했을때 이동이 되는데 왜그런가요?? 강의교안에는 그런게 없어서 영상에는 이동이 잘 되는데 말이죠..

      <NuxtLink v-slot="{ navigate }" custom to="/course/prefetching-1">
              <q-item clickable @click="navigate()">Prefetching Test 1</q-item>
            </NuxtLink>
            <NuxtLink v-slot="{ navigate }" custom to="/course/prefetching-2">
              <q-item clickable @click="navigate()">Prefetching Test 2</q-item>
            </NuxtLink>
            <NuxtLink v-slot="{ navigate }" custom to="/course/prefetching-3">
              <q-item clickable @click="navigate()">Prefetching Test 3</q-item>
            </NuxtLink>
  1. Prefetching에서 NuxtLink tag 안에 custom을 제거하면 prefetching이 정상적으로 되고 custom을 입력하면 prefetching이 되지 않는 것을 console.log에서 확인하였어요.. 혹시 왜그런지 아실까요?

    source :
    https://github.com/nhs0912/onego-front/tree/routing

답변 1

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요!

1. export default {} 선언 관련:

이는 Vue의 컴포넌트 정의 방식과 관련이 있습니다. <script setup> 문법을 사용하더라도, Vue 컴포넌트가 정상적으로 등록되기 위해서는 기본적인 컴포넌트 정의가 필요합니다.

<!-- 방법 1: script setup만 사용 -->
<script setup lang="ts">
// 여기서는 export default가 필요 없습니다
</script>

<!-- 방법 2: 일반 script와 함께 사용 -->
<script lang="ts">
export default {}
</script>

 

2. custom 속성과 prefetching 관련:

custom 속성은 NuxtLink의 기본 동작을 비활성화하고 사용자 정의 렌더링을 가능하게 합니다. 이때 prefetching도 기본 동작의 일부이기 때문에 비활성화됩니다.

custom 속성을 사용하면서 prefetching을 원하신다면:

<NuxtLink 
  v-slot="{ navigate }" 
  custom 
  :prefetch="true"
  to="/course/prefetching-1"
>
  <q-item clickable @click="navigate()">Prefetching Test 1</q-item>
</NuxtLink>

또는 prefetching이 필요한 경우 custom 속성을 제거하고 스타일링을 다른 방식으로 처리하는 것을 추천드립니다:

<NuxtLink 
  class="q-item"
  to="/course/prefetching-1"
>
  Prefetching Test 1
</NuxtLink>

이와 같이 UI Framework 와 NuxtLink를 사용하실 때 다양한 접근 방법을 생각해 볼 수 있어요 🙂

nhs0912님의 프로필 이미지

작성한 질문수

질문하기