Vue > Router란? [2부]
4677 단어 vuenpmvue routernpm
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 : 네비게이션 작업이 완료된 후 호출.
Author And Source
이 문제에 관하여(Vue > Router란? [2부]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@smat91/Vue-Router란-2부저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)