[Vue] 라우터로 특정 컴포넌트에서만 Header 보여주는 방법 (Named Views)

index.js

import { createRouter, createWebHashHistory } from 'vue-router'
// ~ === src/components
import TheHeader from '~/components/TheHeader.vue'
import Home from './Home.vue'

export default createRouter({
  // 해시모드 모드 선택
  history: createWebHashHistory(),
  // 라우터가 변경될때마다 top: 0으로 페이지 스크롤 자동변환
  scrollBehavior: () => ({ top: 0 }),
  // 페이지 정보 명시
  routes: [
    {
      path: '/',
      // component를 components로 변경
      components: {
        // Home.vue 컴포넌트에서만 TheHeader.vue 컴포넌트 보여주는 작업
        // 순서 관계 없음 (객체 데이터는 키와 밸류의 모음집일뿐 순서가 없다)
        TheHeader, // 'TheHeader': TheHeader,
        default: Home
      }
    }, 
  ]
})

 

App.js

<template>
  <!-- Home.vue 컴포넌트에서만 TheHeader.vue 컴포넌트 보여주는 작업 -->
  <RouterView name="TheHeader" />
  <!-- createRouter로 생성한 라우터가 보이는 영역 등록 -->
  <RouterView />
</template>