vue router는 routing 기능을 도와주는 vue의 라이브러리다. routing은 웹 페이지 간의 이동 방법이다. 주로 싱글 페이지 애플리케이션(SPA)에서 사용하며 Vue는 SPA구조를 가지고있다. router를 사용하면 매끄러운 화면 전환으로 사용자 경험을 향상 시킬 수 있다.
페이지를 이동할 때 서버에서 완전한 새로운 웹 페이지를 불러와 사용자에게 돌려주지 않고 미리 가지고 있다가 동적으로 화면을 전환해서 사용자와 소통하는 형태.
검색엔진최적화(SEO)가 가능해지고 초기 구동 속도가 빨라진다.
몇가지 단점이 생기는데
1. 프로젝트가 복잡해지고 개발에 제약이 생긴다(뷰 spa의 라이프 사이클에 대한 이해가 필요해짐)
2. 서버에 부하가 커진다 -> 클라이언트가 아닌 서버가 요청을 계속 처리해주기 때문
만약 ssr을 구현할 여건이 안 된다면 html의 메타태그를 넣어주는 방법과 프리렌더링을 사용하는 방법이 있다.
ssr이 반드시 프로젝트에 반드시 필요한지 고민해보고 사용해야한다!
<router-view></router-view>
router-view 태그는 페이지를 표시해주는 태그다. 변경되는 URL에 따라 해당 컴포넌트를 뿌려준다.
Vue, Vue-router를 import하고 Vue.use(VueRouter)를 호출한다.
라우트 컴포넌트를 정의한다.
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
routes
옵션과 함께 router 인스턴스를 만든다.const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
이후에 html에서 태그를 이용해서 페이지를 이동할 수 있다.
<router-link to="/이동할 페이지"></router/-link>
router-link 태그는 "/이동할 페이지" 로 이동시켜주며
<a>태그로 렌더링된다
JavaScript에서는
router.push('/path');
push를 이용해 다른 컴포넌트에 접근할 수 있다.