SONG's 개발새발

13. Vue Router 기본 컴포넌트

2019-04-28

Vue 라우터 컴포넌트

1. router-view Props

  • <router-view> </router-view>
  • 현재 라우터에 맞는 컴포넌트를 렌더링 해준다.
    요청 url에 따라 컴포넌트 렌더링
  1. <router-link to=""></router-link>
  2. 주로 네비게이션을 위한 컴포넌트
    • a태그 대신 <router-link>로 링크를 건다.
  3. to prop: 링크 지정
    • 경우에 따라 v-bind :to로도 사용한다.
  4. 장점
    • 히스토리모드와 해시모드에서 모두 동일한 방식으로 작동하기 때문에 #를 붙이거나 삭제할 필요없다.
    • 히스토리 모드에서, 클릭 이벤트를 차단하여 페이지 로드를 막아준다. (prventDefalt()와 같은 기능)

3. 라우터 링크를 사용하여 비동기적 페이지 만들기

  1. components 폴더에 ‘Navbar.vue’ 파일 만들기
1
2
3
4
5
6
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/login">login</router-link>
  </div>
</template>
  1. app.vue 파일 수정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <div id="app">
        <Navbar></Navbar> // 컴포넌트 사용
        <router-view></router-view> // 라우터에 따라 해당 데이터로 변경 됨
    </div>
</template>

<script>
    // 네비게이션 컴포넌트 import 시켜줌
    import Navbar from './components/Navbar'


    export default {
    name: 'app',
    components : { Navbar }, //컴포넌트 추가
    data () {
        return {
        }
    }
</script>
Tags: Vue
← 0428 study 14. Vue 동적 라우트 매칭 →