[Vue] 4장 라우팅

1. Vue Router 설치 

Vue.js에서 라우팅을 설정하는 방법은 VueRouter를 사용해 SPA(Single Page Application) 네비게이션을 관리할 수 있습니다 먼저 Vue Router를 설치합니다. 아래 명령어를 사용해 Vue Router를 설치합니다.

npm install vue-router && yarn add vue-router

 

src/router/index.js 파일을 생성하고 라우터를 설정합니다.

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
]

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

export default router

 

src/main.js 파일에서 라우터를 Vue 인스턴스에 연결합니다.

import Vue, { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 라우터 import

const app = createApp(App)
app.use(router) // 라우터 추가
app.mount('#app')

---

2. 라우터 링크 사용

페이지 간 네비게이션을 위해 <router-link> 컴포넌트를 사용합니다. App.vue에서 다음과 같이 설정할 수 있습니다.

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/user">User</router-link>
    </nav>
    <router-view></router-view>
    <!-- 현재 라우트에 해당하는 컴포넌트 랜더링 -->
  </div>
</template>

---

3. 동적 라우팅

동적 라우팅을 사용해 URL 경로에 파라미터를 추가할 수 있습니다. 예를 들어 사용자 상세 페이지를 설정하는 방법은 다음과 같습니다.

{
  path: '/user/:id',
  name: 'UserDetail',
  component: UserDetail,
}

---

4. 중첩 라우팅 

중첩됩 라우트를 설정하려면 하위 라우트를 정의할 수 있습니다. 예를 들어 사용자 관련 페이지를 구성할 수 있습니다.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: '',
        name: 'UserList',
        component: UserList,
      },
      {
        path: ':id',
        name: 'userDetail',
        component: UserDetail,
        meta: { requireAuth: true },
      },
    ],
  },
]

---

 

GitHub - Koras02/vue-tutorial: https://thinky.tistory.com/category/Front-End/VueJS