시작하며
이 글은 Vue.js 2.* 버전을 사용하고 프로젝트가 vue-cli를 통해 webpack 환경으로 구성되어 있는 것을 전제로 합니다.
최근 vue-cli webpack 템플릿에 vue-router가 통합되었습니다! vue-cli로 프로젝트를 생성하면 자동으로 vue-router가 함께 설치됩니다. 이 포스트는 쓰지마자 낡은 문서가 되었어요 😭
VueRouter 설치하기
npm install vue-router --save
VueRouter 불러오기
import Vue from 'vue'
// 이곳에 VueRouter를 불러옵니다.
import VueRouter from 'vue-router'
// Vue에 VueRouter를 연결합니다.
Vue.use(VueRouter)
main.js에 VueRouter를 불러옵니다.
컴포넌트 불러오기
// 라우트 컴포넌트 정의
const Home = App.components.Home
const Login = App.components.Login
main.js에 라우팅할 컴포넌트를 불러옵니다.
라우트 정의
// 라우트 정의
const routes = [
{ path: '/', component: Home },
{ path: '/login', component: Login }
]
main.js에 라우트를 정의합니다.
라우터 정의
// 라우터 인스턴스 생성
const router = new VueRouter({
mode: 'history', // history 모드를 사용하면 주소창에 hash가 없어집니다.
routes // routes: routes 의 약어
})
history mode를 사용하면 URI가
localhost/#/login
에서 localhost/login
으로 변경됩니다.
history mode를 사용할 때 주의해야할 점을 참고하세요.
Vue 인스턴스에 라우터 마운트하기
new Vue({
store,
router, // 이 부분을 추가합니다.
el: '#app',
template: '<App/>',
components: { App }
}).$mount('#app') // 이 부분도요
App 컴포넌트에 라우트 컴포넌트 불러오기
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
App.vue 컴포넌트에<router-view></router-view>
를 추가합니다. 이제 라우팅을 통해 연결한 컴포넌트가 router-view 영역에 렌더링 됩니다.
이제 빌드해보면 에러가 납니다. main.js에 불러왔던 컴포넌트를 App.vue 컴포넌트에도 불러와야 합니다.
<script>
import Home from './components/Home' // 추가해주세요.
import Login from './components/Login' // 추가해주세요.
export default {
name: 'app',
components: {
Home, // 추가해주세요.
Login // 추가해주세요.
}
}
</script>
마치며
정말 쉽죠? 끝으로 Vue.js와 사랑에 빠지시면 됩니다.
0
👍
0
❤️
0
😄
0
😝