08. Router
vue-router 를 이용하여 SPA routing 을 구현해봅니다.
실습
(예제는 이전의 초기 구성되었던 환경에서 시작합니다.)
vue-router 설치
npm i --save vue-router
router.js 추가
path 마다 다른 component 를 보여주기 위해서는 설정이 필요합니다.
// src/router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter); // vue 에서 vue router 를 사용하기 위해 알려줘야합니다.
const router = new VueRouter({
mode: "history", // browser history mode 를 사용합니다.
routes: [{ path: "/", component: "" }] // path 별 component 를 추가합니다.
});
export default router;
/
path 로 들어왔을 경우 보여줄 메인 페이지를 추가해보겠습니다.
// src/views/Home.vue
<template>
<div>
<h1>Home Page</h1>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
/
path 이외의 우리가 정의하지 않은 path 로 들어올 경우 보여줄 Error Page 를 추가하겠습니다.
// src/views/ErrorPage.vue
<template>
<div>
<h1>Error Page</h1>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
path 별로 보여줄 component 설정을 추가해보겠습니다.
import Vue from "vue";
import VueRouter from "vue-router";
import ErrorPage from "./views/ErrorPage";
import Home from "./views/Home";
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
routes: [
{ path: "/", component: Home },
{
path: "*",
component: ErrorPage
}
]
});
export default router;
main.js 에 router 추가하기
router.js 를 추가만 한다고 router 를 이용할 수 있는 것은 아닙니다. main.js 에 추가를 해줘야합니다.
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app");
App.vue 에 router-view 추가하기
routing 된 component 를 보여주기 위해서는 App.vue 에 router-view 를 추가해줘야합니다.
<template>
<div>
<router-view/>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>

Last updated
Was this helpful?