동적 라우터 설정과 이동

태그

동적 라우터

저의 예시는 project 에서 특정 project (프로젝트 상세) 로 이동하는 것입니다.

설정하기

const routes = [
    ...
    {
        path:'/project',
        component:() => import('../components/project/board/BoardList.vue'),
    },
    {
        path:'/project/:boardId',
        component:() => import('../components/project/board/BoardDetail.vue')
    }
		...
];
TypeScript
복사

차이점이 보이시나요? :[변수명] 을 사용하여 동적 라우터를 설정 해주었는데요 그럼 라우터 이동은 어떻게 할까요?

설정한 라우터로 이동 하기

<template>
	<div>
		...
		<div class="projects-list">
      <!-- 프로젝트 목록을 표시합니다 -->
      <router-link :to="`/project/${board.boardId}`" class="project" v-for="board in boardsData" :key="board.boardId" @click="selectProject(board.boardId, board.boardTitle)">
        <div class="project-content">
          <div class="project-title">{{ board.boardTitle }}</div>
          <div class="project-member-container">
            <div v-for="member in board.members" :key="member.memberId" class="badge-created">
              {{ member.username }}
            </div>
          </div>
        </div>
        <div class="board-button-container">
          <font-awesome-icon icon="fa-regular fa-pen-to-square" @click="openUpdateModal(board.boardId, board.boardTitle)" style="margin-right: 15px;" class="board-icon"/>
          <font-awesome-icon icon="fa-solid fa-trash-can" @click="handleDeleteBoard(board.boardId)" class="board-icon"/>
        </div>
      </router-link>
    </div>
		...
  </div>
</template>
HTML
복사

v-for 를 이용하여 동적으로 받아온 요소에서 boardId 를 빼낸 후 아래와 같이 이동 경로를 작성해주면 됩니다. 이때 기존과 달리 ` 을 이용해야 한다는 점 주의 하세요.

<router-link :to="`/project/${board.boardId}`" class="project" v-for="board in boardsData" :key="board.boardId" @click="selectProject(board.boardId, board.boardTitle)">
HTML
복사