[Vue.js] Vue Router 4 시작하기 (특징)

2020-12-17 기준으로 작성

 

- 오역 있을 수 있음

- 환경설정은 아래 url을 참고 (Vue-CLI4 + Vue3 + Vue-Router4)

duriduriduri.tistory.com/3

 

- Vue Router 4 : Vue3 를 위한 repository

- 현재 시점에서는 beta 버전이며, 추후에 수정될 수도 있음

 

1) Vue3 support

•  Vue3 에서는 createdApp API 를 사용하는데, 이는 Vue instance 에 plugin들이 추가되는 방법을 바꿨다.
•  이 때문에 과거버전의 Vue Router는 Vue3과 호환되지 않는다.
•  Vue Router4 는 Vue3 에 사용가능한 createRouter API 를 제공한다.

 

src/router/index.js

import { createRouter } from "vue-router";

export default createRouter({
  routes: [...],
});

 

src/main.js

import { createApp } from "vue";
import router from "./router";

const app = createApp({});
app.use(router);
app.mount("#app");

 

 

2) History option

•  이전 버전의 Vue Router에서는 'mode'를 선택할 수 있는 옵션이 있었다.
  - hash mode 는 URL hash 를 사용해 full URL을 simulate하고, URL이 바뀌어도 page reload 가 되지 않게 한다.
  - history mode 는 HTML5 History API 를 이용해서 page reload 없이, URL 탐색을 수행한다.
•  Vue Routre 4 에서는 이러한 모드들(hash, history)들을 모듈로 추상화하였기 때문에,
  - import 될 수 있고, 새 history option 에 할당할 수 있다.
• 이 추가적인 유연성은 개발자에게 router hisotry implementation 을 coustomize 할 수 있게 해준다.

 

src/router/index.js

// Vue Router 4
import { createRouter, createWebHistory } from "vue-router";

export default createRouter({
  history: createWebHistory(),
  routes: [],
});

 

3) Dynamic routing

• Vue Router 4 는 .addRoute 함수를 이용해 dynamic routes 를 할 수 있다.
• 필수 기능은 아니지만, 흥미로울 수 있는 기능이다.

methods: {
  uploadComplete (id) {
    router.addRoute({
      path: `/uploads/${id}`,
      name: `upload-${id}`,
      component: FileInfo
    });
  }
}

 

이 외에도, 아래의 함수들을 사용할 수 있다.

- removeRoute

- hasRoute

- getRoutes

 

---

 

---

<참고 사이트>

github.com/vuejs/vue-router-next

vuejs/vue-router-next

vuejsdevelopers.com/topics/vue-router/