Vue.js는 다양한 기능을 제공하는데, 그 중 라우팅을 위한 Vue Router는 매우 편리한 기능을 제공합니다. 이 기능 중 하나는 다른 페이지로 이동하면서 파라미터를 전달하는 것입니다. 여기에는 몇 가지 방법이 있습니다.

동적 라우트 매칭

가장 기본적인 방법은 동적 라우트 매칭을 사용하는 것입니다. 이를 통해 URL에 파라미터를 넣고 해당 파라미터를 다른 페이지로 전달할 수 있습니다. 이를 위해 라우트 정의에서 콜론(:)을 사용하여 동적 세그먼트를 정의합니다.

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

위의 코드에서 ‘/user/:id’는 id라는 파라미터를 가진 동적 라우트를 정의한 것입니다. 사용자가 /user/123과 같은 URL로 이동하면 User 컴포넌트에 this.$route.params.id를 통해 123에 접근할 수 있습니다.

쿼리 파라미터

또 다른 방법은 쿼리 파라미터를 사용하는 것입니다. 쿼리 파라미터는 URL 끝에 ?를 붙이고 key=value와 같은 형태로 이어붙이는 방식입니다.

this.$router.push({ path: 'user', query: { id: '123' }})

위의 코드에서 this.$router.push를 사용하여 user 페이지로 이동하면서 쿼리 파라미터로 id=123을 전달할 수 있습니다. 이후 User 컴포넌트에서는 this.$route.query.id를 통해 123에 접근할 수 있습니다.

정리

Vue Router를 사용하여 파라미터를 전달하는 방법에 대해 간단히 알아보았습니다. 동적 라우트 매칭과 쿼리 파라미터를 통해 각각의 상황에 맞게 파라미터를 전달할 수 있습니다. Vue Router의 다양한 기능을 활용하여 보다 유연한 웹 애플리케이션을 개발해보세요.