[vue3] route 와 routes 의 차이

 

route는 현재 라우팅된 URL의 정보를 담고 있는 객체이다.

이 객체는 브라우저의 주소 표시줄에 표시되는 URL과 관련된 정보를 제공함.

 

routes는 라우터에 등록된 모든 라우트를 나타내는 객체이다 .

각 라우트는 경로, 컴포넌트 및 기타 옵션을 포함하며, 이 배열은 일반적으로 라우터의 설정에서 사용된다.

즉, route는 현재 라우팅된 URL의 정보, routes는 라우터의 전체 구성을 나타낸다.

<template>
  <div>
    <h2>route and router</h2>
    <p>$route ::{{ $route }}</p>
    <p>$router:: {{ $router }}</p>
    <p>1 :  {{ $route.path }}</p>
    <p>2 :{{ $route.name }}</p>

    <button class="btn btn-primary" @click="movePage">about 페이지 이동</button>
  </div>
</template>

<script setup>
</script>

 

스크립트 단에서 아무것도 설정안해도 $을 붙여주면 위 사진 처럼 기본정보를 볼 수 있다.

 

 

<template>
  <div>
    <h2>route and router</h2>
    <p>$route ::{{ $route }}</p>
    <p>$router:: {{ $router }}</p>
    <p>1 :  {{ $route.path }}</p>
    <p>2 :{{ $route.name }}</p>

    <button class="btn btn-primary" @click="movePage">about 페이지 이동</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter()
const movePage = () => {
  router.push('/about')
}

</script>

 

아래 처럼 작성하면 /about 로 이동하는 걸 볼 수 있다.

 

물론 router 변수를 한번만 사용하고 script 단에서 코딩하는 게 불편하거나

컨벤션이 딱히 정해지지 않았다면 아래처럼 사용해도 이동은 잘 하는 걸 확인 가능하다.

<template>
  <div>
    <!-- <h2>Home View</h2> -->
    <h2>route and router</h2>
    <p>$route ::{{ $route }}</p>
    <p>$router:: {{ $router }}</p>
    <p>1 :  {{ $route.path }}</p>
    <p>2 :{{ $route.name }}</p>

    <button class="btn btn-primary" @click="$router.push('/about')">about 페이지 이동</button>
  </div>
</template>

<script setup>
</script>

 

위에서 볼 수 있는 거처럼 template 에서 사용하려면 $route, $router 라고 $ 를 붙여준다.

 

 

 

라우터 공식 사이트는 https://router.vuejs.kr/

Vue Router | Vue.js의 공식 라우터