Vue.js) vue-router를 이용해서 컴포넌트들간의 데이터 전달하기

1. 두 가지 방법

vue router로 데이터를 전달하는 방법은 2가지가 있습니다.

• query
• params

2. 전달하기

• query

{name: 'Query', query: {name: 'cat', age: 3}}

• params

{name: 'Params', params: {name: 'dog', age:4}}

<template>
  <div>
    main

    <ul>
      <li @click="clickList">
        Query 프로그래밍 방식
      </li>
      <router-link :to="{name: 'Query', query: {name: 'cat', age: 3}}">
        Query 선언적 방식
      </router-link>
      <li @click="clickParams">
        params
      </li>
      <router-link :to="{name: 'Params', params: {name: 'dog', age:4}}">
        params 선언적 방식
      </router-link>
    </ul>
  </div>
</template>

<script>
    export default {
        name: 'Main',
        methods: {
            clickList () {
                this.$router.push({name: 'Query', query: {name: 'cat', age: 3}})
            },
            clickParams () {
                this.$router.push({name: 'Params', params: {name: 'dog', age:4}})
            }
        }
    }
</script>

3. 라우터

크게 수정할 부분은 없습니다.

다만, params로 전달하는 경우 props:true 로 설정하면 데이터가 props에도 전달됩니다.

import VueRouter from 'vue-router'
import vue from 'vue'

vue.use(VueRouter)

import Main from '@/views/Main.vue'
import Query from '@/views/Query.vue'
import Params from '@/views/Params.vue'

const router = new VueRouter({
    mode: 'hash',
    routes: [
        {
            path: '/',
            component: Main,
            name: 'Main'
        },
        {
            path: '/query',
            component: Query,
            name: 'Query'
        },
        {
            path: '/params',
            component: Params,
            name: 'Params',
            // true로 설정하면 데이터를 props로도 받습니다.
            props: true
        }     
    ]
})

export { router }

4. 받기

1) query

<template>
  <div>
    <h1>Query</h1>

    <h2>name: {{ $route.query.name }}</h2>
    <h2>age: {{ $route.query.age }}</h2>
  </div>
</template>

<script>
    export default {
        name: 'Query',
    }
</script>

2) params

<template>
  <div>
    <h1>Params</h1>

    <h2>params로 받은 데이터</h2>
    <h2>name: {{ $route.params.name }}</h2>
    <h2>age: {{ $route.params.age }}</h2>

    <h2>props로 받은 데이터</h2>
    <h2>name: {{ name }}</h2>
    <h2>age: {{ age }}</h2>
  </div>
</template>

<script>
    export default {
        name: 'Params',
        props: {
            name: {
                type: String,
                default : ''
            },
            age: {
                type: Number,
                default: 0
            }
        }
    }
</script>

5. 확인

쿼리 스트링

1) 정의

URL의 일부분으로 데이터를 전달하기 위해 사용됩니다.

2) 작성 규칙

시작 - ?
다음 질의 - &
데이터 - 변수=값

파이어 폭스 브라우저로 구글에서 날씨를 검색했을때 쿼리 스트링
https://www.google.com/search?client=firefox-b-d&q=%EB%82%A0%EC%94%A8

3) 단점

• URL 이 길어지고, 더러워집니다.
• URL을 통해 정보가 노출됩니다.

 

https://velog.io/@skyepodium/vue-router%EB%A1%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0-eskrsmr3

vue router로 데이터 전달하기