vue router (router -view, router -link)

router 설치

npm install vue-router

 

vue router 등록

// 라우터 인스턴스 생성
var router = new VueRouter({
  // 라우터 옵션
})

// 인스턴스에 라우터 인스턴스를 등록
new Vue({
  router: router
})

# vue router 등록은 어디에다가 하는거지?

 

vue router 옵션

• routes : 라우팅 할 URL과 컴포넌트 값 지정
• mode : URL의 해쉬 값 제거 속성
• URL 값이 /login과 /home일 때 각각 로그인 컴포넌트와 홈 컴포넌트를 뿌려준다

new VueRouter({
  mode: 'history',
  routes: [
    { path: '/login', component: LoginComponent },
    { path: '/home', component: HomeComponent }
  ]
})

# vue router 옵션은 어디에 정의하는거지?

 

 

router-view

url이 변경되면 routers 속성에 따라 해당 컴포넌트가 화면에 뿌려지고 이 지점이 탬플릿의 <router-view> 부분이다

앞서 정의한 라우팅 옵션 기준으로 /login은 로그인 컴포넌트를 /home은 홈 컴포넌트를 화면에 표시합니다

<div id="app">
  <router-view></router-view> <!-- LoginComponent 또는 HomeComponent -->
</div>

# 그러니까 index.html에 이렇게 정의해놓으면 앞서 정의해놓은 /login, /home 에 자동으로 routing 되어서 url이 달라질때마다 해당 url 화면이 뿌려진다.

 

router-link

화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해준다.

<router-link to="이동할 URL"></router-link>

<div>
  <router-link to="/login"></router-link>
</div>

 

 

이후 공부해야 할 사이트

https://jeonghwan-kim.github.io/2018/04/07/vue-router.html

 

 

 

 

 

 

참고 및 인용

https://joshua1988.github.io/vue-camp/vue/router.html#%E1%84%87%E1%85%B2-%E1%84%85%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%90%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8E%E1%85%B5