Vue.js - 라우터링크(router-link)

router-link는 라우터 지원 앱에서 사용자 네비게이션을 가능하게 하는 컴포넌트이다. 기본적으로 <a href=""></a> 태그로 이동이 가능하지만, 경로를 불어올때마다 화면이 새로고침되는 문제가 있다. 

하지만 router-link는 화면이 갱신되지 않고 바로 페이지 이동이 가능하다. 히스토리 모드에서 클릭 이벤트를 차단하여 브라우저가 페이지를 다시 로드되지 않도록 할 수 있다.

 

✔ 자세한 설명은 vue api document를 참고

https://router.vuejs.org/kr/api/#router-link

API 레퍼런스 | Vue Router

 

 

Props

<router-link to="[이동할 링크]"></router-link>

 

router-link로 navbar 생성

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/login">Login</router-link>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

componets 폴더에 navbar라는 컴포넌트를 생성하고 router-link 태그를 사용하여 홈 경로와 로그인 경로를 라우팅해주었다.

 

App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <router-view></router-view>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'

export default {
  name: 'app',
  components: { Navbar },
  data () {
    return {
    }
  }
}
</script>

<style>

</style>

root 컴포넌트인 App.vue에 생성한 navbar를 import 하고 컴포넌트로 선언하였다.