Vue > Router란? [2부]

1. ToDo

- Vue 공부하면서 정리정리!

---

2. Router 뭐에요?

- Router, Routing 이란 웹 페이지 경로를 미리 정의하여 페이지 이동을 매끄럽게 하기위해 사용한다.

- Client에서는 Routing을 이용해 화면을 갱신한다.

- 이런 방식을 SPA(Single Page Application)이라고도 한다.

---

2. Router 어떻게 써요?

1. npm을 이용해서 설치.

npm install vue-router

2. router 모듈 정의

[main.js]
import router from './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

[./router/index.js]
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  path: [실제 Vue Component의 URL 경로],
  name: [실제 Vue Component의 이름],
  component: () => import(실제 Vue Component의 Directory)
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

---

3. Router의 Lifecycle

< 참고 : https://adeuran.tistory.com/14 >

• 각 Router의 생명 주기를 파악한다면 웹 페이지 경로 이전을 더 매끄럽게 작업 할 수 있다.

  • beforeRouteLeave : 기존 Component의 제거 전에 호출.
  • beforeEach : 기존 Component가 제거된 후 새로운 네비게이션이 시작될 때 호출.
  • beforeRouteUpdate : Component를 재사용 할 경우에만 발생.
  • beforeEnter : Route에 진입하기 전 호출.
  • beforeRouteEnter : 새로운 Component를 만들기 전 호출.
  • beforeResolve : 네비게이션 작업을 완료하기 전에 호출.
  • afterEach : 네비게이션 작업이 완료된 후 호출.