태태개발일지 - Vue Router(캡틴판교)

Routing

vue의 롸우팅이란?

vue.js에서 페이지 간 이동을 위한 라이브러리이다.

 

설치방법

 

terminal에서 아래와 같은 명령어를 실행하면 dependency에 router에 대한 라이브러리가 명시된다.

npm install vue-router --save

 

 

import Vue from 'vue';
import VueRouter from 'vue-router';
import Hello from './Hello';

Vue.use(VueRouter);

export default new VueRouter({
    routes: [{
        path: '/', 
        redirect: '/home' 
    }, 
    {
        path: '/info',
        component: Hello
    }]
});

 

아래와 같이 코드를 작성하게되면,

1. path : URL을 통해서 메핑이 된다.

2. 아래에 명시되어있는 componet로 이동한다

3. 2가 아니라 redirect가 명시되어있다면 리다이렉트 하게된다.

 

 

main.js에는 router를 명시해주어야한다.

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

 

여기서 위에 import와 export를 해야한다.

 

<router-link to="/main">main</router-link>
<router-view> hi </router-view>

 

아래와 같이 router-link와 router-view가 있는데

간략하게 설명하자면

1. router-link는 path로 요청을 하는 것이다.

2. router-view는 롸우터에 메핑

된 componet로 이동시켜주는 것이다.