32. Vue - Router Link

1. Router Link란? 

- 홈페이지를 만들면 네비게이션이라는 것을 만들게 된다. 

- 네비게이션은 쉽게 말하면 메뉴다. 

- 흔히 a태그를 이용해서 만들지만, Vue에서는 Router Link라는 컴포넌트를 사용하기를 권장한다. 

 

---

2. 동작원리 

- Router Link는 Router View와 함께 사용된다. 

- index.js에 할당된 라우팅 페이지들이 Router View에서 출력된다.

- 그리고 Router Link를 사용하여 특정 Vue 페이지를 URL에 할당하는 것이다. 

- 예제코드를 직접 보면서 이야기 하자. 

 

[파일경로]

 

[Header.vue]

<template>
  <header>
    <div class="nav nav-pills">
      <!-- 반복문을 활용한 네비게이션 만들기 -->
      <div
        v-for="nav in navigations"
        :key="nav.name"
        class="nav-item">
        <!-- RouterLink: 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>

 

[App.vue]

<template>
  <Header />
  <router-view />
  <!-- router-view: 라우팅 요소가 출력되는 태그-->
</template> 

<script>
import Header from '~/components/Header'
export default {
  components: {
    Header
  }
}
</script>

<style lang="scss">
@import "~/scss/main"; // scss 파일 연동 

</style>

 

[index.js]

import {createRouter, createWebHashHistory} from 'vue-router'
import Home from './Home'
import Movie from './Movie'
import About from './About'


export default createRouter({
  // Hash, History 모드 설정 
  // -Hash 모드: https://google.com/#/home 처럼 # 기호를 사용하는 주소체계 
  history:createWebHashHistory(), 

  // page 담당 
  routes: [
    {
      path: '/', // 최상위 페이지(메인 페이지) 경로설정 
      component: Home // 메인 페이지에 연결할 컴포넌트 
    },
    {
      path: '/movie', 
      component: Movie 
    },
    {
      path: '/about', 
      component: About 
    }
  ]
})

 

[작동 방식]

클릭하면 확대 됩니다.

 

---

3. 출력화면 

 

 

 

---

4. 참고문서

 

[Vue - Router Link]

 

https://next.router.vuejs.org/guide/#router-link

Getting Started | Vue Router

 

[Vue - to, active-class]

 

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

API Reference | Vue Router