Vue.JS의 라우터 링크에 데이터 전달

This post was first posted on my blog

안녕. 이 게시물에서는 Vue.JS의 라우터 링크에 데이터를 전달하는 방법을 보여드리겠습니다. vue-cli로 만든 Vue 프로젝트가 있다고 가정해 봅시다. HelloWorld라는 구성 요소가 하나 있습니다. 기본적으로 HelloWorld라는 하나의 구성 요소가 있습니다. Profile이라는 새 구성 요소를 만듭니다.

예를 들어 다음과 같은 쿼리 문자열을 사용하고 싶지 않습니다.

https://localhost/#/profile/2

쿼리 문자열 없이 매개변수를 소품으로 사용할 수 있습니다. 시작하자.

Profile.vue 컴포넌트 생성

Profile.vue라는 Vue 구성 요소를 만들겠습니다. 다음과 같습니다.

<template>
    <div>
        {{ welcome }}
    </div>
</template>

<script>
export default {
    name: 'Profile',
    props: ['msg'],
    data() {
        return {
            welcome: 'This is your profile'
        }
    },
    mounted() {
        if (this.msg) {
            this.welcome = this.msg    
        }

    }
}
</script>

위의 코드는 msg라는 이름의 prop을 포함하고 위의 코드는 welcome이라는 이름의 객체를 반환합니다. 누군가 이 페이지를 직접 열면 프로필 메시지입니다. 누군가가 다른 경로에서 온다면?

HelloWorld.vue의 수정

라우터 링크 덕분에 다른 경로에서 오는 사람을 생각해 봅시다. 우리 구성 요소는 다음과 같아야 합니다.

<template>
  <div class="hello">
      <router-link :to="{ name: 'Profile', params: { msg } }">
         Go to your profile
      </router-link>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: `This is Ali's profile`
    }
  }
}
</script>

위의 코드에는 다른 경로로 전달하기 위한 msg 객체가 있습니다. 누군가 프로필 링크로 이동을 클릭하면 페이지가 http://localhost:8080/#/profile 페이지로 리디렉션됩니다. 그러나 Vue DevTools를 확인하면 데이터가 표시되지 않습니다. 라우터 파일을 구성하지 않았기 때문입니다.

라우터 파일 구성

라우터 파일은 다음과 같아야 합니다.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Profile from '@/components/Profile'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      props: true
    }
  ]
})

프로필 경로에는 props 키가 있고 그 값은 true입니다. Vue DevTools를 확인해 봅시다.



루트 구성이 이랬다면?

{
  path: '/profile',
  name: 'Profile',
  component: Profile,
  props: false
}

데이터를 전달하지 않습니다.



읽어 주셔서 감사합니다. 이 게시물이 도움이 되길 바랍니다. Vue 라우터website를 방문하여 자세한 내용을 확인할 수 있습니다.