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을 통해 정보가 노출됩니다.
최신 댓글