vue to-do 리스트 구현 5 - router 구현

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 적용

https://juntcom.tistory.com/319