[Vue] Vue Router 데이터 전달하기

- 지난 시간

안녕하세요. 지난 시간에는 Vue Router 개념 및 설치 방법에 대해 알아봤습니다.

 

혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. :)

any-ting.tistory.com/45

[Vue] Vue Router 개념 및 설치

- 개요

이번 시간에는 Vue Router에서 데이터 전달하는 방법에 대해 알아보겠습니다.

 

기본적으로 데이터를 전달하는 방식은 두 가지 방식이 있습니다.

 

1. Query
2. Params

그리고 프로그래밍 방식과 선언적 방식이 있습니다.

 

* Query

{name: 'Query', query: {name: '개발이 취미인 사람 1', age: 1 }}

* Params

{name: 'Params', params: {name: '개발이 취미인 사람 2', age: 2 }}

 

위와 같은 형태로 데이터를 보낼 수 있습니다. name은 우리가 작성한 라우터 파일 안에 작성한 name과 동일해야 합니다.

 

보내는 부분을 소스 코드를 통해 확인해보겠습니다.

 

- 라우터 파일

import Vue from 'vue';
import VueRouter from 'vue-router';
import Main from '@/views/Main.vue';
import Query from '../views/Query.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    path: '/Query',
    name: 'Query',
    component: Query,
  },
  {
    path: '/Params',
    name: 'Params',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Params.vue'),
    // true로 설정하면 데이터를 props로도 받습니다.
    props: true,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

 

Params로 데이터를 전달할 때 route 옵션에서 props: true로 설정하면 props로 값을 받을 수 있다. 

 

- 데이터 전달

App.vue

<template>
  <div>
    Main
    <div>
      <router-link to="/">Main 페이지로</router-link>
    </div>

    <div>
      <br />

      <div>
        <button @click="clickList">Query 프로그래밍 방식</button>
      </div>
      <br />
      <div>
        <router-link
          :to="{ name: 'Query', query: { name: 'Query 선언적 방식', age: 1 } }"
        >
          Query 선언적 방식
        </router-link>
      </div>

      <br />

      <div>
        <button @click="clickParams">Params 프로그래밍 방식</button>
      </div>

      <br />

      <div>
        <router-link
          :to="{
            name: 'Params',
            params: { name: 'Params 선언적 방식', age: 1 },
          }"
        >
          Params 선언적 방식
        </router-link>
      </div>
    </div>

    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    clickList() {
      this.$router.push({
        name: "Query",
        query: { name: "Query 프로그래밍 방식", age: 2 },
      });
    },
    clickParams() {
      this.$router.push({
        name: "Params",
        params: { name: "Params 프로그래밍 방식", age: 2 },
      });
    },
  },
};
</script>

 

 

데이터를 전송할 때 선언적 방식과 프로그래밍 방식으로 Query, Params 기능을 만들었습니다.

 

선언적인 방식은 말 그대로 선언해서 사용한다는 뜻입니다. 그리고 프로그래밍 방식은 개발자가 로지컬 한 부분으로 만들어 사용한다는 방식입니다.

 

- 데이터 받기

Main.vue

<template lang="ko">
    <div>
        <h1>Main 페이지</h1>
    </div>
</template>
<script>
export default {
  name: "Main",
};
</script>

 

Query.vue

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

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

<script>
export default {
  name: "Query",
  created() {
    console.log(this.$route.query.name);
    console.log(this.$route.query.age);
  },
};
</script>

 

Params.vue

<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,
    },
  },
  created() {
    console.log(this.$route.params.name);
    console.log(this.$route.params.age);
  },
};
</script>

 

실행 결과

실행 결과 잘 동작하는 걸 확인하실 수 있습니다. 이해가 잘 안 가시는 분들은 직접 실습 또는 댓글을 남겨주세요. :)