[Vue]Vue Router

Vue Router에 대한 포스팅입니다.

Router ?
일반적인 웹 애플리케이션은 페이지 이동시마다 해당 웹 페이지를 서버에 요청하고, 받아온 페이지를 화면에 보여준다. (서버에 요청)
SPA는 최초 사이트 접속 시 모든 페이지를 받아놓고, 라우팅(Routing)을 이용하여 필요한 부분만 바꾼다. (서버에 요청하지 않고, 라우터를 이용한 화면전환)

Router 설치
Vue는 코어 라이브러리 외에 Router 라이브러리를 공식 지원한다.
npm install vue-router

Router 등록

//router.js
const router = {
  mode: "history",
  routes: [
    { path: "/", component: Home },
    { path: "/about", component: About },
  ]
};
export default new VueRouter(router)

//main.js
new Vue({
  router, //라우터 등록
  render: h => h(App),
}).$mount('#app') //앱 s마운트

• Router 인스턴스를 생성하고, 뷰 인스턴스에 등록한다.

Vue Router 옵션

대부분의 SPA 애플리케이션은 아래의 2가지 옵션을 필수로 지정한다.
mode : URL의 해쉬 값 제거 속성
routes : 라우팅 할 URL과 컴포넌트 값 지정

Router-view
브라우저의 주소 창에 URL이 변경되면, routes 속성에 따라 컴포넌트를 바꿔 화면에 뿌린다.
이 때, 뿌려지는 곳은

<router-view></router-view>

router-view가 있는 지점에 뿌려진다.

Router-link
웹 페이지에서 페이지를 이동할 때 화면에 특정 링크를 클릭해서 페이지를 이동할 수 있게 해줘야 하는데 이 때

<router-link to="test"></router-link>

를 사용한다.
router-link는 a태그로 변형되어 화면에 표시된다.