[Vue.js] vue-router 설치 후 라우팅하기

💡 실습 포인트!

---

💜 vue-router 설치 및 셋팅하기

• 페이지를 여러 개 만들고 싶을 때 Router 라는 것을 사용한다.
• Vue 에서는 vue-router 라는 라이브러리를 설치하면 Router 를 이용할 수 있다.

🤍 vue-router 4 버전 설치하기

npm install vue-router@4

• 위와 같이 터미널에 입력해서 vue-router 4 버전을 설치한다.
• yarn 이 설치되어있다면 npm install 대신에 yarn add 를 이용해도 된다.
• vue-router 를 설치하기 전에 만약 npm run serve 를 입력하여 프로세스가 진행중이라면 이 프로세스를 종료한 다음에 진행해주어야 에러가 발생하지 않는다.

---

🤍 router.js 파일 만들기

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/경로",
    component: import해온 컴포넌트,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

• vue-router 를 사용하기 위해 src 폴더 안에 router.js 파일을 만들어서 위와 같이 코드를 작성한다.
• path 와 component 만 수정 혹은 추가해가며 페이지들을 만들어주면 된다.

---

🤍 main.js 파일에 router.js 파일 import 해주기

import router from './router.js'
createApp(App).use(router).mount('#app')

• main.js 파일에 router.js 파일을 router 라는 이름으로 import 해주었다.
• 그리고 createApp(App).mount('#app') 이라는 코드 중간에 .use(router) 라는 코드도 삽입해주었다.

---

🤍 App.vue 파일에 <router-view></router-view> 추가하기

• App.vue 파일에 있는 <template></template> 내의 원하는 위치에 <router-view></router-view> 를 추가하면 Router 로 구분된 페이지를 해당 위치에 보여줄 수 있게 된다.
• 만약 전송해야할 props 가 있다면, 기존에 Component 사용할 때의 props 를 전송한 방식과 동일하게 <router-view> 에 코드를 추가해주면 된다.

---

🤍 router.js 파일에 Route 만들기

import List from './components/List.vue';

const routes = [
  {
    path: '/list',
    component: List,
  }
];

• 이제 router.js 파일에서 특정 경로로 접속했을 때 특정 Component 를 보여줄 수 있도록 코드를 수정해주면 된다.
• 예를 들어, /list 경로로 접속했을 때 List.vue 를 보여주고 싶다면 다음과 같이 진행하면 된다.
  • List.vue 파일을 List 라는 이름으로 import 한다.
  • path 부분에 '/list' 라고 경로를 작성한다.
  • component 부분은 List.vue 를 import 할 때 지어준 이름인 List 로 작성한다.

const routes = [
  {
    path: "/",
    component: Main,
  },
  {
    path: "/list",
    component: List,
  }
];

• 만약 Route 를 추가하고 싶다면 위와 같이 object 자료형으로 추가해주면 된다.

---

🤍 페이지 이동 링크 만들기

<router-link to="/list">이동하기</router-link>

• <a></a> 와 유사하게 페이지 이동 링크를 만들고 싶다면, 위와 같이 <router-link></router-link>를 사용하면 된다.
• to="이동할경로" 와 같은 형태로 코드를 작성하면 원하는 대로 경로 설정이 가능하다.