Vue Router는 Vue.js 애플리케이션에서 라우팅을 관리하는 공식 라이브러리입니다.
라우팅이란 사용자가 특정 URL을 요청했을 때, 그 URL에 맞는 페이지나 컴포넌트를 제공하는 기능을 말합니다.
Vue Router를 사용하면 단일 페이지 애플리케이션(SPA)에서 페이지 간 네비게이션을 쉽게 구현할 수 있습니다.
1. Vue Router 설치
먼저 Vue Router를 프로젝트에 설치해야 합니다.
npm install vue-router@next이 명령어는 Vue 3용 Vue Router를 설치합니다. 설치가 완료되면 Vue Router를 프로젝트에 추가할 수 있습니다.
2. 라우터 설정 (router/index.js)
프로젝트의 src 디렉토리 아래에 router 폴더를 만들고, 그 안에 index.js 파일을 생성합니다. 이 파일에서 라우터를 설정합니다.
import { createRouter, createWebHistory } from 'vue-router'
import ToDoList from '../components/ToDoList.vue'
import TodoDetail from '../components/TodoDetail.vue'
const routes = [
{ path: '/', name: 'Home', component: ToDoList },
{ path: '/todo/:id', name: 'TodoDetail', component: TodoDetail, props: true }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router• createRouter: Vue 3에서 라우터를 생성하는 함수입니다.
• createWebHistory: HTML5의 history 모드를 사용하는 함수로, 브라우저의 URL을 깔끔하게 유지합니다.
• routes: 경로와 그에 연결된 컴포넌트를 정의하는 배열입니다.
• props: true: 라우트 파라미터를 컴포넌트의 props로 전달할 때 사용합니다.
3. 라우터를 Vue 애플리케이션에 추가 (main.js)
이제 main.js 파일에서 Vue 애플리케이션에 라우터를 추가해야 합니다.
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import router from './router' // Vue Router를 가져옵니다.
loadFonts()
createApp(App)
.use(vuetify)
.use(router) // Vue Router를 사용합니다.
.mount('#app')여기서 router를 Vue 애플리케이션에 use하여 라우터를 활성화합니다.
4. App.vue에서 라우터 뷰 설정
App.vue 파일에서 router-view 컴포넌트를 사용하여 현재 라우터에 맞는 컴포넌트를 렌더링할 수 있도록 설정합니다.
<template>
<v-app>
<v-container>
<router-view /> <!-- 라우터가 렌더링할 컴포넌트가 여기에 표시됩니다. -->
</v-container>
</v-app>
</template>
<script>
export default {
name: 'App',
}
</script>• router-view: Vue Router에서 제공하는 컴포넌트로, 현재 라우트에 맞는 컴포넌트를 렌더링합니다.
5. 페이지 컴포넌트 작성
각 라우트에 연결된 컴포넌트를 작성합니다. 예를 들어, ToDoList.vue와 TodoDetail.vue 파일을 작성합니다.
ToDoList.vue
<template>
<v-container>
<v-row>
<v-col>
<h1>Vue.js To-Do App</h1>
<AddTodo @add-todo="addTodo" />
<v-list>
<v-list-item
v-for="(todo, index) in todos"
:key="index"
@click="$router.push({ name: 'ToDoDetail', params: { id: index } })"
>
<template v-slot:prepend>
<v-checkbox
v-model="todo.completed"
@change="saveTodos"
hide-details
/>
</template>
<v-list-item-title>{{ todo.text }}</v-list-item-title>
<template v-slot:append>
<v-btn icon="mdi-delete" size="small" @click.stop="removeTodo(index)">
</v-btn>
</template>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-container>
</template>
<script>
import AddTodo from './AddTodo.vue'
export default {
name: 'ToDoList',
components: { AddTodo },
data() {
return {
todos: []
}
},
mounted() {
const savedTodos = localStorage.getItem('todos')
if (savedTodos) {
this.todos = JSON.parse(savedTodos)
}
},
methods: {
addTodo(newTodo) {
this.todos.push({ text: newTodo, completed: false })
this.saveTodos()
},
removeTodo(index) {
this.todos.splice(index, 1)
this.saveTodos()
},
saveTodos() {
localStorage.setItem('todos', JSON.stringify(this.todos))
}
}
}
</script>• $router.push: 사용자가 클릭할 때 특정 라우트로 이동합니다.
• params: { id: index }: 라우트 파라미터로 id를 전달합니다.
ToDoDetail.vue
<template>
<v-container>
<h2>To-Do Detail</h2>
<v-card>
<v-card-text>
<p>ID: {{ id }}</p>
</v-card-text>
</v-card>
<v-btn @click="$router.push('/')">Back</v-btn>
</v-container>
</template>
<script>
export default {
props: {
id: {
type: String,
required: true
}
}
}
</script> • props: { id }: 라우트 파라미터로 전달된 id를 컴포넌트에서 사용합니다.
이전 블로그
vue to-do 리스트 구현 4 - vuetify 적용
'프론트엔드 > Vuejs' 카테고리의 다른 글
| vue to-do 리스트 구현 6 - vuex 구현 (0) | 2024.08.17 |
|---|---|
| Vue Router란? (0) | 2024.08.17 |
| vue to-do 리스트 구현 4 - vuetify 적용 (0) | 2024.08.16 |
| vue to-do 리스트 구현 3 - 컴포넌트 분리 및 emit 실습 (0) | 2024.08.16 |
| vuejs to-do 리스트 구현 2 - 로컬스토리지 (0) | 2024.08.16 |
