Vue vue-router에 대해서 알아보자

컴포넌트를 만들었으면 이를 여러 개의 페이지 형태로 만들고 싶다.

이럴 때에 라우터라는 것을 사용한다.

 

vue-router라는 라이브러리를 설치하면 라우터를 사용할 수 있다.

그럼 이제 누군가 mysite.com/list로 접속하면 List.vue를 보여주거나

누군가 mysite.com/detail로 접속하면 Detail.vue를 보여주세요

와 같은 코드를 짤 수 있다.

 

1. 라우터 세팅하기

나는 Vue3버전을 사용하고 있어서 vue-router 4버전을 설치하였다.

npm install vue-router@4

 

터미널에 입력. 꼭 npm run serve 하고 있던 걸 종료하고 설치하자. 아니면 에러가 난다.

 

2. 라우터 파일을 생성하자

src 하위에 적절한 위치에 router.js라는 이름으로 파일을 만들고 다음과 같이 설정하자

/**
 * router 설정을 보관하는 .js 파일이다.
 * import {} from '원래는 경로지만 라이브러리 이름을 쓰면 그 라이브러리를 가져다 쓴다는 말임'
 */
import { createWebHistory, createRouter } from "vue-router";
import List from "./components/List.vue";
import Home from "./components/Home.vue";
import Detail from "./components/Detail.vue";

/**
 * 어떤 사람이 path의 경로로 접근하면 해당하는 component를 보여주세요~라는 뜻임
 *
 */
const routes = [
  {
    path: "/list",
    component: List,
  },
  {
    path: "/home",
    component: Home,
  },
  {
    path: "/detail",
    component: Detail,
  },
];

/**
 * createRouter가 라우터를 생성해주는 고마운 함수이다.
 * 안에 Object 형태로 설정을 집어넣으면 router설정이 끝난다!
 * routes라는 것도 길어서 위에 빼놓은 것
 *
 */
const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

 

형식이라서 그냥 그렇구나 하자

이제 path, component부분만 수정하면 다른 페이지들을 만들어 낼 수 있다.

 

3. main.js에 다가 router를 사용한다고 말해주자.

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

// 물론 router라는 이름은 다른 걸로 작명해도 된다.

 

 

4. 원하는 곳에 <router-view></router-view>를 추가해주자.

App.vue에 (일단 여기다 연습) html 내부 아무데나 이 태그를 추가하면

라우터로 구분된 페이지를 이 태그 자리에 보여준다.

 

5. 라우트(route)를 만들고 싶다면

/detail로 접속했을 때 Detail.vue를 보여주고 싶으면

(router.js)

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

const routes = [
  {
    path: '/detail',
    component: Detail,
  }
];

 

이렇겍 router.js를 수정하면 된다. 그럼 /detail로 접속하면 Detail.vue가 보인다.

(혹시 안보인다면 props나 다른 걸 빼먹었을 수도 있다.)

props 전송은 <router-view :전송할데이터="전송할데이터"></router-view>

 

 

6. 라우트를 추가하고 싶다면

(router.js)

import Detail from './components/Detail.vue';
import 컴포넌트 from './components/컴포넌트.vue';

const routes = [
  {
    path: '/detail',
    component: Detail,
  },
  {
    path: '/경로',
    component: 위에서 import 해온 컴포넌트,
  }
];

 

7. 페이지 이동 링크를 만들고 싶으면

  <router-link to="/">홈페이지로 가기</router-link>
  <router-link to="/list">리스트 가기</router-link>
  <router-link to="/detail">상세페이지로 가기</router-link>

 

이런 식으로 태그를 추가하자 (a태그와 비슷하다)

to="" 안에 마음대로 경로 설정이 가능하다.

 

 

페이지를 나누고 싶으면

1. 우선 컴포넌트를 만들자
2. 그리고 {}로 경로와 컴포넌트를 설정을 추가하자
3. props전송할 게 있다면 <router-view></router-view>에 해주자.