[Vue.js] VueRouter을 이용한 페이지 이동

• Vue-Cli와 Vuetify가 설치된 상황

페이지 이동 방법

'npm i vue-router@3.5.3' 을 통해 vue-router 모듈 3.5.3 버전 설치

src 폴더 안에 'pages'라는 폴더를 생성하고 'page-1.vue', 'page-2.vue' 생성

src 폴더 안에 있던 'main.js'에 다음과 같은 내용들을 추가

import VueRouter from 'vue-router'
Vue.use(VueRouter);
import Page1 from './pages/page-1.vue'
import Page2 from './pages/page-2.vue'

const routes =[
  {
    path:'/1',
    component: Page1,
  },{
    path:'/2',
    component: Page2,
  }
];
const router = new VueRouter({
  routes
});

기존에 있던 Vue 생성 부분에서 router을 추가해줌

new Vue({
  vuetify,
  render: h => h(App),
  router        // 추가된 부분
}).$mount('#app')

기존의 'App.vue'를 다음과 같이 수정

<template>
  <div id="app">
    <router-link to="/1"> 1페이지로 </router-link>
    <br>
    <router-link to="/2"> 2페이지로 </router-link>
    <router-view/>
  </div>
</template>

'page-1.vue', 'page-2.vue'에는 다음의 코드 입력

    <template>
    <div>
        1페이지입니다.  <!--page-1.vue-->
        2페이지입니다.  <!--page-2.vue-->
    </div>
    </template>

결과