Vue Router 사용하는 방법
-
라우터 세팅하기 : npm install vue-router@4
-
템플릿에서
<router-link>태그 설정하기
<router-link to="/home"> Home </router-link>
<router-link to="/servicees"> Services </router-link>
main.js에서 Vue와 Vue 라우터 import 하고 함수를 이용해 호출하기
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
- 라우트 컴포넌트를 정의하거나 import 한다.
const Home = { templete:
'<div>Home</div>}
const Services = { templete :'<div>Services</div>'}
5.라우트를 정의합니다. 각 라우트는 반드시 컴포넌트와 매핑되어야 합니다.
const routes = [
{ path: '/home' , component: Home },
{ path: '/services' , component: Services }
]
- routes 옵션과 함께 router 인스턴스를 만듭니다.
const router = new VueRouter ({ routes })
- 루트 Vue 인스턴스를 만들고 mount 합니다.
const app = new Vue({ router }).$mount('#app')
동적 라우트 매칭 (매개변수와 라우트 사용하기 )
const User = {
template:'<div>User {{ $route.params.name }}, PostId: {{ route.params.postid }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:name/post/:postid', component: User }
]})
