[ Vue.js ] Vue-router 사용하기 + 데이터 전달하기 (바인딩) , $route, router, how to use, useRoute

사용환경 : Vue.js 2, vue-cli, vue-Router 사용

 

router-link + binding 를 통해 해당 내용을 전달해준다.

<router-link :to="'/detail/'+123453" >

여기서 `123453` 이 전달하고자하는 변수가 될 수도 있다.

---

 

1. Home.vue

<template>
// 각각의 id를 가진 리스트를 v-for로 출력.
<div class="movie" v-for="movie in movies" :key="movie.imdbID">
	<router-link :to="'/movie/' + movie.imdbID" />
    	// router-link를 통해 반복문을 통해 출력된 movie 객체의 id값을 전달하고자 한다.

</template>

 

2. Index.js (router)

  {
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
  }

: 바인딩을 통해 id값을 전달할것이라고 선언한다.

 

3. MovieDetail.vue

2가지 방법으로 출력이 가능하다.

  1. html 요소에 바로 텍스트만 출력
  2. script 내에서 추가 가공 후 또다른 전체 데이터를 출력

  1. html 요소에 출력

  html 요소에 출력하는 것은 간단하다.

<template>
	<div> {{ $route.params.id }} </div>
</template>

이렇게 바로 사용이 가능하다.

 

  2. script 내에서 가공 (후 또 다른 전체 데이터를 출력)

  위에서 $route를 바로 사용하던데에 반해 이번에는 vue의 useRoute 기능을 사용해야 한다.

 

import { useRoute } from 'vue-router'

export default {
  setup () {
    const route = useRoute()
    const paramsValue = route.params.id  
  }
}

이렇게 paramsValue로 변수를 선언하여 사용할 수 있다.