Vue 동적 라우팅 사용법

Vue 라우터 설치

npm install vue-router@4

router/index.js 파일을 만들고 라우터를 설정한다. 여기서는 params를 사용하여 동적 라우팅을 설정한다.

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import User from '../views/User.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

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

export default router

User.vue 파일에서 동적으로 전달된 id 값을 사용한다.

<template>
  <div>
    User {{ $route.params.id }}
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

App.vue 파일에서 router-view를 추가한다.

<template>
  <div id="app">
    <router-view />
  </div>
</template>

마지막으로, main.js 파일에서 라우터를 추가한다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

이제 /user/:id 경로로 이동하면 User 컴포넌트가 렌더링되고 동적으로 전달된 id 값이 표시된다.