Vue에서 매개변수를 전달하고 수신하기 위해 라우팅을 사용하는 방법은 무엇입니까?

Vue에서 매개변수를 전달하고 수신하기 위해 라우팅을 사용하는 방법은 무엇입니까?

Vue는 최신 반응형 웹 애플리케이션을 구축하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue에서 라우팅은 웹 페이지 간의 탐색 및 점프를 관리하는 데 사용되는 중요한 개념입니다. 개발 과정에서 서로 다른 경로 간에 데이터를 전달해야 하는 경우가 많습니다. 이 기사에서는 라우팅을 사용하여 Vue에서 매개변수를 전달하고 수신하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1. 경로 매개변수 전달
   Vue에서는 경로 매개변수 전달을 사용하여 한 경로에서 다른 경로로 데이터를 전달할 수 있습니다. 이를 달성하는 방법에는 여러 가지가 있습니다.

1.1 쿼리 매개변수
쿼리 매개변수는 ?key=value 형식의 라우팅 URL에 있는 매개변수입니다. $route 객체의 쿼리 속성을 사용하여 전달된 매개변수를 가져올 수 있습니다. 다음은 쿼리 매개변수를 사용하여 매개변수를 전달하는 예입니다.

발신자 경로에서 $route.router.push 메서드를 사용하여 수신자 경로로 점프하고 매개변수를 전달할 수 있습니다.

this.$router.push({
  path: '/receiver',
  query: {
    name: 'John',
    age: 25
  }
});

수신자 경로에서, $route.router.query를 사용하여 전달된 매개변수를 가져올 수 있습니다.

console.log(this.$route.query.name); // John
console.log(this.$route.query.age); // 25

1.2 동적 라우팅
동적 라우팅은 /:param 형식의 매개변수를 URL의 일부로 사용합니다. $route.params를 사용하여 전달된 매개변수를 가져올 수 있습니다. 다음은 동적 라우팅을 사용하여 매개변수를 전달하는 예입니다.

발신자 경로에서 $route.router.push 메서드를 사용하여 수신자 경로로 점프하고 매개변수를 전달할 수 있습니다.

this.$router.push({
  path: `/receiver/${this.name}/${this.age}`
});

수신자 경로에서, $route.params를 사용하여 전달된 매개변수를 가져올 수 있습니다.

console.log(this.$route.params.name); // John
console.log(this.$route.params.age); // 25

2. 라우트 수신 매개변수
   라우트에서 전달된 매개변수를 받은 후 대상 구성 요소에서 이를 처리하고 사용할 수 있습니다. 예는 다음과 같습니다.

<template>
  <div>
    <h1>Welcome to the receiver page!</h1>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  mounted() {
    this.name = this.$route.query.name;
    this.age = this.$route.query.age;
    // 或者 this.name = this.$route.params.name;
    //     this.age = this.$route.params.age;
  }
};
</script>

위 예는 수신자 구성 요소의 $route 개체를 사용하여 경로에 의해 전달된 쿼리 매개 변수 또는 동적 매개 변수를 가져오는 방법을 보여줍니다. 템플릿에서 사용하기 위해 전달된 매개변수를 구성 요소의 데이터 속성에 할당합니다.

요약
Vue에서 매개변수를 전달하고 수신하기 위해 라우팅을 사용하는 것은 매우 간단합니다. 쿼리 매개변수 또는 동적 라우팅을 통해 경로 간에 데이터를 전달하고 수신자 구성 요소에서 처리하고 사용할 수 있습니다. 쿼리 매개변수이든 동적 라우팅이든 전달된 매개변수는 $route 객체를 통해 얻을 수 있습니다. 이 글이 Vue의 라우팅 매개변수 전달 기능을 더 잘 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 Vue에서 매개변수를 전달하고 수신하기 위해 라우팅을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!