url 파라미터 받기

url 주소의 특정 값을 취해야 할 때가 있습니다. 다음의 예에서

/page/1?id=test#abcd

1, id, #abcd를 취하는 방법입니다.

파라미터

/page 경로의 뷰가 있다고 할 때 /page/1일 경우 1은 어떻게 취해야 할까요?

먼저 특별한 설정을 하지 않으면 /page와 /page/1은 다른 경로이므로 같은 뷰를 바라보게 라우트 설정을 해야 합니다.

| index.ts

...
    {
      path: '/page/:id?',
      name: 'page',
      component: () => import('../views/PageView.vue')
    },

이제 vue에서 route.params로 id값에 접근할 수 있게 됩니다.

| PageView.vue

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

const { id } = route.params
...

쿼리

/page?id=test 에서 id값은 route.query 에서 얻을 수 있습니다.

const { test } = route.query

해시

/page#abcd에서 #abcd는 route.hash에 저장 됩니다.