vue6(vue-router)

VUE는 SPA!

여러 화면을 하나의 페이지 안에서 제공해준다.

따라서 화면마다 고유한 식별자를 기반으로 화면을 렌더링 해야함

vue-router라는 라이브러리를 사용해서 URI를 고유식별자로 사용해줌

 

---

router 예제

: home, about, contacts 세개의 라우터를 만들어서 연결

 

1.src/components 폴더에 Notice, About 컴포넌트 만들기

2.App.vue에 router-link, router-view 작성 (&&자리에 라우터 객체에서 매핑한 컴포넌트가 들어옴)

//App.vue

<template>
  <div id="app">
    <router-link to="notice"> 공지 </router-link>
    <router-link to="about"> ABOUT </router-link>

    <router-view> && </router-view> 
  </div>
</template>

<script>


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

3.Main.js에서 

 1) 컴포넌트,router Import 해주기

 2) VueRouter 쓸게여

 3) Router 인스턴스 생성 → path별로 보여줄 컴포넌트 매핑한 라우터 객체 만들기

 4) 인스턴스에 라우터 인스턴스 등록!

 

//Main.js

//1.
import Vue from 'vue'
import App from './App.vue'
import Notice from './components/Notice'
import About from './components/About'
import VueRouter from 'vue-router'

//2.
Vue.config.productionTip = false
Vue.use(VueRouter)

//3.
const router = new VueRouter({
  mode:'history',
  routes: [
    {path:'/notice', component: Notice},
    {path:'/about', component: About}
  ]
})

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