Vue.js는 데이터를 다루기 쉽고 효율적인 방법을 제공합니다. Vue Router를 사용하면 라우트 간에 데이터를 전달하는 것 또한 간단해집니다.

Vue Router에서 라우트 전환 시 데이터를 전달하는 방법을 알아보겠습니다.

동적 세그먼트 사용하기

Vue Router에서 라우트 간에 데이터를 전달하는 가장 간단한 방법은 동적 세그먼트(dynamic segment)를 이용하는 것입니다.

예를 들어, URL에 사용자 ID를 포함하고 있는 라우트가 있다고 가정해봅시다.

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

라우트 정의에 사용자 ID를 동적 세그먼트로 정의했습니다. /user/:id에서 :id 부분은 동적으로 변하는 부분을 나타냅니다.

이렇게 동적 세그먼트를 활용하면, 라우트로 이동하는 동안 데이터를 전달할 수 있습니다.

$route.params 사용하기

Vue Router는 현재 라우트에 대한 정보를 $route로 제공합니다. 따라서 라우트 전환 시 동적 세그먼트에 전달된 데이터를 얻기 위해서는 $route.params를 사용할 수 있습니다.

예를 들어, 사용자 컴포넌트에서 사용자 ID를 사용하여 데이터를 가져오는 경우:

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
  created() {
    this.fetchUserData($route.params.id)
  },
  methods: {
    fetchUserData(id) {
      // 사용자 ID에 기반한 데이터 가져오기
    }
  }
}

위의 예제에서 $route.params.id를 통해 라우트로부터 전달된 사용자 ID에 접근하고 있습니다.

$router.push로 데이터 전달하기

라우트로 이동하면서 데이터를 함께 전달하려면 $router.push 메서드를 사용할 수 있습니다.

// 사용자 ID가 123일 때 user 라우트로 이동하며 데이터 전달
this.$router.push({ path: '/user/123', query: { plan: 'paid' }})

위의 예제에서 { plan: 'paid' } 부분은 라우트로 전달될 데이터를 의미합니다.

이를 통해 Vue Router를 사용하여 라우트 전환 시 데이터를 전달하는 방법에 대해 알아보았습니다.

라우트 간에 데이터를 주고받을 때 어떤 방식을 사용할 지 고려하는 것도 중요합니다.

더 많은 정보는 Vue Router 공식 문서를 확인해보시기 바랍니다.