[Vue] route 에서 url parameter 받아오기

VUE : Get URL Parameter

Url 에서 파라메터를 가져오는 방법입니다.

 

1. $route.params

https://hello-bryan.tistory.com/search/hello/20

이런 url 이 있을 때,

router 설정

  {
    path: '/search/:text/:size',
    components: {
      header: Header,
      default: SearchBody,
      footer: Footer
    }
  }

파라메터 접근은 $route.params 입니다.

<template>
  {{ $route.params }} <!-- { text: 'hello', size: 20 } -->
  {{ $route.params.text }} <!-- hello -->
  {{ $route.params.size }} <!-- 20 -->
</template>

 

---

2. $route.query

파라메터가 ? 를 통해서 들어올 경우

https://hello-bryan.tistory.com/search?text=hello&size=30

router 설정

  {
    path: '/search',
    components: {
      header: Header,
      default: SearchBody,
      footer: Footer
    }
  }

파라메터 접근은 $route.query 입니다.

<template>
  {{ $route.query.text }} <!-- hello -->
  {{ $route.query.size }} <!-- 20 -->
</template>