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