[vue] Router 생성·구현하기

1. 먼저 라우터로 연결할 페이지(컴포넌트들)를 만든다.

src > views 디렉토리를 만들고, 그 안에 3개의 vue 컴포넌트를 만들었다.

2. main.js에 router를 넣어준다.

import Vue from 'vue';
import App from './App.vue';
import router from './routes';  // Make sure this points to your router configuration

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
    router,
}).$mount('#app');

App.vue로 이동하도록 경로 설정한다! router를 render 안에 넣어준다.

3. 라우터 만들기 (router 디렉토리 생성)

import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from "@/pages/LoginPage.vue";
import MainPage from "@/pages/MainPage.vue";
import MapPage from "@/pages/MapPage.vue";
import MyPage from "@/pages/MyPage.vue";

Vue.use(Router);

const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: MainPage,
    },
    {
        path: '/map',
        component: MapPage,
    },
    {
        path: '/login',
        component: LoginPage,
    },
    {
        path: '/myPage',
        component: MyPage
    }
];

export default new Router({
    mode: 'history',
    routes,
});

• import Router from 'vue-router';
  Vue.use(VueRouter);
  를 작성 하고 , router를 export한다.

• 생성한 각 각의 컴포넌트들을 import하여 라우팅시켜 주었다.

3. 그리고 App.vue에서

<template>
  <div id="app">
    <router-view />
  </div>  
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style module>

</style>

<router-view /> 를 넣어주는데 여러개의 컴포넌트들을 원하는 위치로 표시하고 싶을 때 router view를 사용해야한다.

root App인 App.vue에 router-view로 맵핑시켜 각 라우팅 설정에 따른 페이지 이동이 가능하게 하였다.