vue-router를 이용한 라우팅 - Vue.js

Vue-router

SPA(단일 페이지 애플리케이션: Single Page Application)

• 하나의 페이지 안에서 데스크톱 애플리케이션과 같은 사용자 경험을 제공
• 여러 화면을 하나의 페이지 안에서 제공, 화면을 별도로 로딩하지 않음 ➡ 화면마다 고유의 식별자(URI)를 기반으로 화면을 렌더링 해야 함

• 요청한 URI 경로에 따라 각각 다른 화면이 렌더링 되도록 함 ➡ vue-router 라이브러리 이용

---

 

vue-router의 기본 사용법

1️⃣ createRouter()

• createRouter(options):Router
• router 객체를 생성
• URI 와 이 경로를 처리할 컴포넌트 매핑

import { createRouter, createWebHistory } from 'vue-router'
 …
 const router = createRouter({ // 라우팅 테이블
 history: createRouter(),
 routes: [ // 배열 형태
         { path: '/', components: Home },
         { path: '/about', components: About },
         { path: '/members', components: Members },
         { path: '/videos', components: Videos},
     ]
 });

• router 객체 등록
• const app = createApp(App) app.use(router) app.mount('#app')

 

2️⃣ <RouterView>

• 각 경로별 컴포넌트를 렌더링할 위치를 지정하는 컴포넌트
• 일반적으로 App.vue 에서 설정

<template>
  <div class="container">
    <Header />
    <RouterView />
  </div>
</template>

 

3️⃣ <RouterLink to=”경로”>

• 화면 전환을 위한 링크 생성

<router-link to="[등록시킬 URI 경로]">[링크 텍스트]</router-link>

// 등록시킬 URI 경로를 문자열이 아닌 변수로 할 경우는 v-bind사용
<router-link :to="[등록시킬 URI 경로]">[링크 텍스트]</router-link>

<RouterLink to="/">Home</RouterLink> //최종적으로는 a 태그로 렌더링됨 

⭐ 태그를 사용하면 페이지 이동 시 이전 정보가 사라지므로 router-link를 통해 마치 태그의 기능처럼 작동하게 됨

---

 

프로젝트 생성

npm init vue 프로젝트이름
vue-router 선택 후 enter
cd 프로젝트이름
npm install

 

📦 프로젝트 구조

src
├─assets
│      base.css
│      logo.svg
│      main.css
│
├─components
│  │  HelloWorld.vue
│  │  TheWelcome.vue
│  │  WelcomeItem.vue
│  │
│  └─icons
│          IconCommunity.vue
│          IconDocumentation.vue
│          IconEcosystem.vue
│          IconSupport.vue
│          IconTooling.vue
│
├─router         # 라우터 생성됨 
│      index.js
│
└─views         # 일반적으로는 pages 이름으로 사용
        AboutView.vue
        HomeView.vue

 

📁src/router/index.js

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [ // 수정 대상 
    {
      path: '/',
      name: 'home',
      component: HomeView, // 초기 로딩시 실행 
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting ⭐
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'), // 당장 실행 X, /about 요청이 들어왔을 때 실행 
    },
  ],
})

export default router

• route level-splitting : build 단계가 index.html → js → css 로 진행 되는데 규모가 커지면 초기 로딩 시간이 길어지므로 javascript 부분을 잘라서 필요한 부분만 로딩하도록 하는 것
• 나중에 실행하도록 lazy-loaded
• 해당 path가 요청됐을 때 로딩 되도록 함

 

📁 src/main.js

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // -> index.js

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

 

📁 src/App.vue

<script setup>
  import { RouterLink, RouterView } from 'vue-router'
  import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="@/assets/logo.svg"
      width="125"
      height="125"
    />
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView /> <!--본문 파트-->
</template>
<style scoped>
  …
</style>

 

🧱 작업할 프로젝트 컴포넌트 구조

---

 

router 객체와 currentRoute 객체

컴포넌트에서 router 객체 접근하기

• this.$router
  • src/router/index.js에서 작성한 router 객체
  • 전체 라우트 정보 파악
  • push(), replace(), go() 등의 매서드 이용가능

 

Router 관련 정보 접근

구분	Options API	Composition API
라우터 객체	this.$router	const router = useRouter() 스크립트로 페이지 이동
매칭된 라우트(currentRoute)	this.$route 또는 this.$router.currentRoute	const currentRoute = useRoute()

 

currentRoute 객체의 주요 속성

currentRoute 객체의 주요 속성	설명
fullPath	전체 요청 경로, 쿼리문자열까지 포함 (예: /about?a=1&b=2)
matched	vue-router 객체의 routes 배열의 라우트 중 매칭된 라우트
params	URI 경로에 동적으로 전달된 파라미터 정보 (동적 라우트에서 사용)
path	요청 URI 경로
query	쿼리 문자열 정보 (?a=1&b=2 요청 시 this.$route.query는 { a: 1, b: 2 })
redirectedFrom	다른 경로에서 리디렉트된 경우, 리디렉트시킨 URI 경로 정보를 포함

 

---

 

route vs router

◽ route

• 현재 라우트 정보
• 경로, 쿼리, 파라미터 등을 포함하고 있음
• 컴포넌트 내부에서 useRoute() 훅 또는 this.$route 로 접근 가능

// 예: 현재 라우트의 파라미터 가져오기
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.params.id) // 예: /user/123 -> id = 123
  }
}

 

◽ router

• Vue Router 인스턴스
• 애플리케이션 전체의 라우팅 설정을 관리하는 객체
• 경로(route)와 컴포넌트(component)를 연결하는 역할
• 예) 어떤 URL로 이동했을 때 어떤 컴포넌트를 보여줄지 정의

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

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

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

export default router

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

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

개념	역할	접근 방법
route	현재 라우트 상태	userRoute() 또는 this.$route
router	전체 라우팅 설정 및 이동 제어	useRouter() 또는 this.$router