Vue 라우터

Lee kyu min·2024년 4월 9일

vue

Vue

목록 보기

5/13

Vue Router

vue에서 페이지 이동을 위한 라이브러리
페이지 이동시 url이 변경되면 변경 요소의 component 갱싱

1. 설치방법 및 생성

1) 설치

Vue3는 Vue Router의 4.x 버전을 사용해야함

npm install vue-router@4

2) 설정

* index.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/HomeView.vue')
  },
  // 추가 라우트 정의
]

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

export default router

* main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // router 설정을 임포트

const app = createApp(App)
app.use(router) // Vue 애플리케이션에 router를 등록
app.use(vuetify)
app.mount('#app')

2. 태그

1) < router-link to="경로 >

컴파일시 a태그 로 변환
to 속성값 경로로 이동
v-bind와 함께 사용 시 동적으로 경로를 만들 수 있음
router-link-exact-active 등 class를 통해 스타일을 줄 수 있음

<router-link v-bind:to="`/user/${item.username}`">User-Info</router-link>
<!--./user/username -->
<router-link to="/user/">USER</router-link>
<!--./user/ -->

2). < router-view >

페이지 표시 태그(라우터 렌더링)
url에 따른 component가 화면에 그려지는 영역

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

3). < transition >

페이지(라우트) 전환시 페이지에 애니메이션 적용
name속성 값 기반으로 클래스 적용

<template>
  <transition name="fade">
    <router-view class="main"></router-view>
  </transition>
</template>
<style scoped>
/* CSS : Router Transition */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

3. 파라미터 전달(dynamic routing)

1) url-path를 동적으로 요청받아 데이터를 전달

// router.js
// 만약, url이 '/post/123'라면 :[id]=123 데이터와 함께 PostItem 컴포넌트로 이동
const router = new VueRouter({
	routes: [{
		path : '/post/:id'
        component : () => import('../views/PostItem.vue')
	}]
});

2) 파라미터 정보를 가져올 때는 $객체 참조

// PostItem.vue
// this.$route.params.id로 값을 전달 받을 수 있음
created() {
  getPost('requestPost', this.$route.params.id);
}

4. 화면구성(Nested Routers, Named Views)

1) Nested Routers

한 URL에 지정된 1개의 컴포넌트가 여러 하위 컴포넌트를 갖도록 렌더링

<div id="app">
  // url="/user/.."인 경우 User 컴포넌트가 들어옴 
  <router-view></router-view>
</div>
const User = {
  template: `
    <div class="user">
	  <h2>User {{ $route.params.id }}</h2>
	  // id값에 맞는 User의 하위 컴포넌트가 들어옴 
      <router-view></router-view>
    </div>
  `,
}

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // /user/:id/profile is matched
        path: 'profile',
        component: UserProfile,
      },
      {
        // /user/:id/posts is matched
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

2) Named View

한 URL에 여러 컴포넌트를 영역별로 지정하여 렌더링

// App.vue
<div id="app">
  <router-view name="appHeader"></router-view>
  <router-view></router-view>
  <router-view name="appFooter"></router-view>
</div>

// router.js
{
  path: '/home',
  // Named Router
  components: {
    appHeader: AppHeader,
    default: Body,
    appFooter: AppFooter
  }
},