inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

NuxtPage 내장 컴포넌트

definePageMeta 리랜더링이 안됩니다..

198

이영훈

작성한 질문수 4

0

<template>
  <div class="q-pa-xl">
    <AppCard>
      <template #header>
        <div class="text-h5 text-weight-medium">{{ course?.title }}</div>
        <div class="flex q-gutter-x-sm items-center q-mt-sm text-grey-8">
          <span class="flex items-center">
            <q-icon name="star" size="16px" color="orange" />
            <span>{{ course?.rating }}</span>
          </span>
          <span>{{ course?.reviewsCount }}</span>
          <span>&middot;</span>
          <span>{{ course?.studentCount }}</span>
          <q-space />
          <a class="text-bold" :href="course?.reviewsUrl" target="_blank">
            수강평 보기
          </a>
        </div>
      </template>
      <div class="q-mb-md">
        <VideoPlayer :src="course?.video" />
      </div>
      <div class="row q-col-gutter-md">
        <div class="col-6">
          <q-btn
            label="인프런에서 수강하기"
            unelevated
            class="full-width"
            color="primary"
            :href="course?.inflearnUrl"
            target="_blank"
          />
        </div>
        <div class="col-6">
          <q-btn
            label="짐코딩 클럽에서 수강하기"
            unelevated
            class="full-width"
            color="red"
            :href="course?.gymcodingUrl"
            target="_blank"
          />
        </div>
      </div>
      <p class="q-mt-lg text-grey-8">
        {{ course?.content }}
      </p>
      <template #footer>
        <q-btn
          v-if="prevCourse"
          label="이전 강의"
          color="primary"
          unelevated
          :to="prevCourse.path"
        />
        <q-space />
        <q-btn
          v-if="prevCourse"
          label="쿼리추가"
          color="primary"
          unelevated
          :to="{ path: $route.path, query: { timestamp: Date.now() } }"
        />
        <q-space />
        <q-btn
          v-if="nextCourse"
          label="다음 강의"
          color="primary"
          unelevated
          :to="nextCourse.path"
        />
      </template>
    </AppCard>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
const courseSlug = route.params.courseSlug as string;
const { course, prevCourse, nextCourse } = useCourse(courseSlug);
console.log('re');
definePageMeta({
  key: (route) => route.fullPath,
});
</script>

<style scoped></style>

 

 

<template>
  <NuxtLayout>
    <NuxtPage />
    <!-- <RouterView /> -->
    <!--layouts>default.vue의 slot부분-->
  </NuxtLayout>
</template>
<script setup lang="ts"></script>

 

해당 코드처럼 넣은후 쿼리파라미터를 넣어도 리랜더링이 안되네요.. ㅠ

 

vue.js nuxt.js pinia vue-3

답변 1

0

짐코딩

안녕하세요 🥹

  1. VSCode 를 재시작 해보시겠어요?

  2. 강의 소스와 동일한지 확인해 보시겠어요?

  3. 두 가지를 체크했는데 안될 경우 github 주소를 알려주실 수 있을까요?

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

0

74

2

eslint 설정 관련 질문

0

81

1

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

0

75

1

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

0

172

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

364

2

피니아 persist 질문드립니다!

0

179

1

prefetching 질문

0

112

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

197

1

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

0

250

2

fetch와 axios에 대한 질문

0

180

1