30. Vue - 라우터(Router, Routing)

1.  설치 

 

https://next.router.vuejs.org/installation.html

Installation | Vue Router

 

a) Vue Router를 개발 의존성( -D) 으로 설치하지 않는이유?

• 일반의존성: 프로그램 패키지 자체에 포함되어 있어야 하는 라이브러리 또는 패키지 
• 개발의존성: 프로그램 자체에 포함되어 있지 않아도 되는 라이브러리 또는 패키지  

 

---

2. 설정 

 

[기본 구조]

 

 

[main.js]

import {createApp} from 'vue'
import App from './App'
import router from './routes/index.js'

createApp(App)
  .use(router)
  .mount('#app')

 

 

[index.js]

import {createRouter, createWebHashHistory} from 'vue-router'
import Home from './Home'
import About from './About'


export default createRouter({
  // Hash, History 모드 설정 
  // -Hash 모드: https://google.com/#/home 처럼 # 기호를 사용하는 주소체계 
  history:createWebHashHistory(), 

  // page 담당 
  routes: [
    {
      path: '/', // 최상위 페이지(메인 페이지) 경로설정 
      component: Home // 메인 페이지에 연결할 컴포넌트 
    },
    {
      path: '/about', // about 페이지 경로 
      component: About // about 페이지에 연결할 컴포넌트 
    }
  ]
})

 

 

[App.vue]

<template>
  <router-view />
  <!-- router-view: 라우팅 요소가 출력되는 태그-->
</template> 

<script>
export default {
}
</script>