vue3 의 router 에서 경로지정하는 index.js 파일 예시

Vue 3에서 Vue Router를 사용하는 경우, index.js 파일은 라우터 설정을 정의하는 중요한 부분이다.

 

index.js 파일에 경로(route) 설정 및 기타 관련 설정들을 구성할 수 있다.

Vue 3에서는 Vue Router 4.x 버전을 사용하며, 이전 버전과 일부 차이가 있다.

 

기본적인 Vue Router 설정 (index.js)

// src/router/index.js

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/profile/:username',  // 동적 경로
    name: 'Profile',
    component: () => import('../views/Profile.vue'),  // Lazy loading
    props: true
  },
  {
    path: '/:catchAll(.*)',  // 404 페이지 설정
    name: 'NotFound',
    component: () => import('../views/NotFound.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 

설명

• createRouter
  • Vue 3에서 새로운 라우터를 생성하는 함수. 라우터를 생성할 때 history와 routes를 인자로 전달한다.
• createWebHistory
  • HTML5 History 모드를 사용하여 라우터가 작동하도록 설정한다.
  • 이는 브라우저의 주소 표시줄에서 # 없이 라우팅이 가능하게 한다.
• routes 배열
  • 각 경로(route)와 그에 해당하는 컴포넌트들을 정의.
• path
  • URL 경로를 정의.
• name
  • 경로의 이름. 이 이름을 사용하여 프로그램적으로 해당 경로로 이동할 수 있다.
• component
  • 해당 경로에 표시될 Vue 컴포넌트를 지정한다.
• props
  • true: 경로에 전달된 동적 매개변수(:username)를 컴포넌트의 props로 전달하도록 설정한다.
• Lazy Loading
  • import()를 사용하여 컴포넌트를 지연 로딩할 수 있고, 이를 통해 페이지 로딩 속도를 최적화할 수 있다.
• 404 페이지 처리
  
  • path: '/:catchAll(.*)'는 일치하는 경로가 없을 때 404 페이지를 표시하는 라우트.

Vue 3 애플리케이션에 라우터 연결

• router/index.js 파일을 설정한 후, 이를 메인 앱에 연결한다.

// src/main.js

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

const app = createApp(App)

app.use(router)  // Vue 3 애플리케이션에 라우터 등록

app.mount('#app')

동적 라우트 예시

• 동적 경로(/profile/:username)를 설정하면, URL의 특정 부분을 변수로 처리할 수 있다.
• 예를 들어, /profile/yuneene 로 접근하면 username은 yuneene 가된다.
• 아래 예시에서는 URL에서 전달된 username 값을 props로 받아와서 컴포넌트에서 사용할 수 있게 된다.

<!-- src/views/Profile.vue -->
<template>
  <div>
    <h1>Profile Page</h1>
    <p>User: {{ username }}</p>
  </div>
</template>

<script>
export default {
  props: ['username'],  // 동적 경로 파라미터 받기
}
</script>

프로그램적으로 라우팅하기

• Vue 3에서는 this.$router.push나 this.$router.replace를 사용하여 특정 경로로 이동할 수 있다.
• 예를 들어, 로그인 후 사용자를 홈 화면으로 리다이렉트할 때 다음과 같이 사용할 수 있다.

this.$router.push({ name: 'Home' })  // 이름으로 경로 이동

• 또는 경로와 파라미터를 사용해서 이동할 수 있다.

this.$router.push({ name: 'Profile', params: { username: 'yuneene' } })

 

결론

위 예시는 Vue 3의 기본적인 라우터 설정이다.

경로를 정의하고, 동적 라우팅을 설정하고, 컴포넌트를 필요할 때만 로드하는 등 다양한 기능을 통해 애플리케이션의 성능과 유지 보수성을 높일 수 있다.