[Vue] Router

1. 뷰 라우터 설치

npm install vue-router --save

 

2. 라우터 폴더 및 index.js 파일 생성

router

 -> index.js

 

3. 라우터로 보여줄 views 작성

Home.vue

<template>
  <div>Home me</div>
</template>
<script>
export default { name: "Home" };
</script>

 

About.vue

<template>
  <div>About vue</div>
</template>
<script>
export default {
  name: "About",
};
</script>

 

4. index.js 파일에 코드 작성

import Vue from 'vue'
import Router from 'vue-router'

// 연결할 컴포넌트 작성
import Home from '@views/Hoem'
import About from '@views/About'

Vue.use(Router)

export default new Router({
    mode: 'history', // history 모드는 자연스러운 url 가능, 지정하지 않으면 해시(#)기호로 url 사용
    routes: [
        {
            path: "/", // 경로
            name: "Home", // 해당 경로의 이름 
            component: Home // 이동할 컴포넌트
        },
        {
            path: "/about",
            name: "About",
            component: About
        },
    ]
})

 

5. main.js에 route 관련 설정 추가

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index";

Vue.config.productionTip = false

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

3번째 줄 router 임포트

8번째 줄 Vue 객체 안에 router 작성

 

6. App.vue에 router-view 작성

<template>
  <HelloWorld msg="안녕하세요 Vue.js 앱 입니다 !!" />
  <router-view />
</template>

4번에서 설정한 경로에 따라 <router-view>에서 각각의 vue 페이지를 보여주게 된다.