Vue | router 사용하기

요약

Getting Started | Vue Router (vuejs.org)

설치

npm install vue-router@4

yarn add vue-router@4

실행

npm run serve

yarn start

router.js

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

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

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

export default router; 

src 폴더 안에 route.js 파일을 만들어 위의 내용을 붙여넣기합니다.

main.js

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

main.js 에도 router 를 사용한다고 알려줘야 합니다.

라우트 만들기

(router.js)

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

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

/list 로 접속하면 List.vue 파일에 있는 컴포넌트를 보여줍니다

심화 활용

path: "/" // 홈으로 가기
path: "/:anything(.*)" // 모든 문자 들어오면 404로 만듬 (정규식 사용)
path: "/detail/:id"
path: "/detail/:id/:id2"
path: "/detail/:id*" //  /detail/:id/:id/:id 무한 사용가능
path: "/detail/:id(\\d+)" // 숫자만 찾는 정규식 문법

사용하기

<router-link> 컴포넌트는 사용자 네비게이션을 할 수 있게 만듭니다.

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

목표 위치는 to prop으로 지정합니다.

라우트 값 가져오기

{{ $route.params.id }}

컴포넌트에 :id 의 라우트 값을 가져옵니다

태그 치환

<router-link to="/link-to-page" tag="div">
</router-link>

참조

• Installation | Vue Router (vuejs.org)