[Vue.Router] <RouterLink>,<RouterView>

post-thumbnail
<script>
import { RouterLink, RouterView } from "vue-router";
</script>


<template>
  <nav>
    <RouterLink to="/">Login</RouterLink>
    <RouterLink to="/testapi">Test</RouterLink>
  </nav>
  <RouterView />
</template>

<RouterView /><RouterLink>와 무관하게 동작하기 때문입니다. <nav> 안의 <RouterLink>는 단순히 사용자가 경로를 쉽게 이동할 수 있도록 하는 UI 요소입니다. 이를 주석 처리해도:

  1. Vue Router는 여전히 routes에 정의된 경로와 현재 URL을 비교하여 적합한 컴포넌트를 결정합니다.
  2. <RouterView />는 설정된 라우팅 규칙에 따라 컴포넌트를 렌더링합니다.

요약

  • <RouterLink>는 단순히 사용자 인터페이스에서 경로를 변경하기 위한 링크일 뿐입니다.
  • <RouterView />는 라우터가 매핑한 컴포넌트를 화면에 렌더링하는 역할을 합니다.
  • <nav>를 주석 처리해도, Vue Router는 현재 경로에 맞는 컴포넌트를 <RouterView />에 렌더링하므로 정상적으로 동작합니다.

0개의 댓글