#1.Vue router parameter , query 값 전달

1. App.vue

 //1. router-link :to 를 사용해 화면전환 및 파라미터 전달
 <v-list-tile-title><router-link :to="{name: 'users', params: {id: 1}}">About</router-link></v-list-tile-title>
 //2. click 이벤트로 라우터 호출
      <v-list-tile-title @click="$router.push({name: 'users', params: {id: 2}})" >About2</v-list-tile-title>

2.router.js

const Users = () =>{return import ("./views/Users.vue")}

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
 
     {
      path: '/users/:id', //전달할 변수명 지정 :/변수명
      name: 'users',
      component: Users //위에 import한 부분의 변수명과 같게 
    }
  ]

3. Users.vue

<template>
  <div>
  Users
  {{id}}
  {{$route.params.name}} <!-- 라우터 path에 없는 파라미터도 받을 수 있다. route에 파라미터 정보가 담기겨있기 때문에-->
  </div>
</template>
<script>
export default {
  data: () => ({
  }),
    computed: {
      //id 의 값을 라우터에서 받아서 미리 셋팅
    id(){
      return this.$route.params.id
    }
    }
}

</script>

실행결과, User 버튼을 클릭하면 라우터를 통해 넘겨받은 파라미터들이 셋팅된다.

 

query 로 값전달

주소창에 값이 보여짐

App.vue

    </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title @click="$router.push(
            {
            name:'users',
            params:{  id:123, name:'wonkyoung'},
            query:{
            group:'member',
            category:'trial'
            }
            }
            )">Users</v-list-tile-title> <!-- router주소에 선언된 파라미터가 아니라도 값을 전달해서 전달된 화면에 뿌려줄수 있다. -->
          </v-list-tile-content>
        </v-list-tile>

Users.vue

<p>이 유저의 그룹은 {{$route.query.group}} 입니다. </p>
<p>이 유저의 카테고리는 {{$route.query.category}} 입니다. </p>