Vue 프로젝트 Header - Nav

 

Header - Nav

 

 

각 네비 버튼을 누르면 연결된 Vue 페이지 이동

 

Header - Nav 순서

 

1. /src/component/Header.vue 생성

<!-- Header.vue -->

<template>
  <header>
    <div class="nav nav-pills">
      <div 
        v-for="nav in navigations"
        :key="nav.name"
        class="nav-item">
        <!-- vue 라우터에서는 라우터 링크라는 컴포넌트를 제공 -->
        <!-- a 태그를 대체해서 조금 더 효율적으로 페이지를 관리 -->
        <RouterLink 
          :to="nav.href"
          active-class="active"
          class="nav-link">
          {{ nav.name }}
        </RouterLink>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      navigations: [
        {
          name: 'Search',
          href: '/'
        },
        {
          name: 'Movie',
          href: '/movie'
        },
        {
          name: 'About',
          href: '/about'
        }
      ]
    }
  }
}
</script>

 

2. App.vue 에서 Header.vue 연결

<!-- App.vue -->

<template>
  <Header />
  <RouterView />
</template>

<script>
import Header from '~/components/Header'

export default {
  components: {
    Header
  }
}
</script>

<style lang="scss">
@import "~/scss/main"
</style>

 

3. /src/routes/Movie.vue 생성

4. 페이지 관리를 위해 ./src/routes/index.js 에서 Movie.vue 연결

/* 페이지를 관리해주는 구성 파일 */
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home'
import Movie from './Movie'
import About from './About'

/* createRouter()를 기본 내보내기 */
/* main.js 에서 router 라는 이름으로 받아서 하나의 플러그인으로 프로젝트에 적용 */
export default createRouter({
  // Hash 모드
  // 예시 - https://google.com/#/search
  history: createWebHashHistory(),
  // pages (페이지를 구분)
  routes: [
    {
      // 페이지를 구분해주는 각각의 경로
      path: '/',
      component: Home
    },
    {
      path: '/movie',
      component: Movie
    },
    {
      path: '/about',
      component: About
    }
  ]
})

 

결과

 

---

 

참고

https://getbootstrap.com/docs/5.0/components/navs-tabs/

Navs and tabs

https://next.router.vuejs.org/api/#to

API Reference | Vue Router

 

https://next.router.vuejs.org/api/#active-class

API Reference | Vue Router