inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

NuxtLink 내장 컴포넌트

prefetching 질문

112

nhs0912

작성한 질문수 22

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

vue.js nuxt.js pinia vue-3

답변 1

1

짐코딩

안녕하세요!

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를 사용하실 때 다양한 접근 방법을 생각해 볼 수 있어요 🙂

Nuxt 4 관련 강의 업데이트 계획이 있으실까요?

0

73

2

eslint 설정 관련 질문

0

81

1

vscode 자동 저장 시 탭 사이즈 조절 안되고 있습니다..

0

74

1

eslint 설정 오류 질문드립니다.

0

170

2

pageContainerStyle 이름을 찾을 수 없습니다 에러

0

56

1

npm create nuxt &lt;project-name&gt; 현재는 nuxi 로 프로젝트 생성하는 것이 권장으로 적혀있지 않는 것 같은데

0

129

2

타입체크 관련질문입니다.

1

216

1

eslint prettier 설정 오류

0

200

2

clearNuxtState() 사용 문의

0

99

1

nuxt 빌드 환경 질문드립니다!

0

363

2

피니아 persist 질문드립니다!

0

179

1

[nuxt] [request error] [unhandled] [500] __QUASAR_SSR_SERVER__ is not defined

0

290

4

사진 오류

0

105

1

@pinia/nuxt 버전이 0.9.0인 경우 @pinia-plugin-persistedstate/nuxt와 충돌

1

187

2

Nuxt3는 SSR인가요? USR인가요?

1

340

2

VSCode처럼 멀티 Title & Menu Bar로 개발할려면?

0

261

2

Course 데이터 가져오기에서 궁금한 점

1

209

2

프로젝트 생성

0

336

3

웹 서버, WAS 그리고 api 서버 관련

0

400

2

$route 관련 에러

0

166

1

package.json 구성 관련 문의

0

196

1

코드에서 $i18n, $route 등 provide로 제공된 객체가 템플릿에서 붉은색으로 표시됩니다.

0

250

2

fetch와 axios에 대한 질문

0

180

1

교안에 있는 jsonwebtoken

0

203

1