Vue 라우팅 매개변수 설정 방법에 대한 자세한 소개

Vue는 데이터 기반 및 구성 요소화된 뷰를 핵심으로 하는 진보적인 JavaScript 프레임워크입니다. Vue Router는 Vue.js의 공식 라우팅 관리자입니다. 이를 통해 경로를 통해 애플리케이션 상태를 찾고 사용자가 요청할 때 적절한 구성 요소를 렌더링할 수 있습니다.

Vue 라우팅에서는 매개변수가 있는 자리 표시자가 포함된 동적 경로를 정의할 수 있습니다. 예를 들어, 사용자 ID와 일치하는 매개변수가 포함된 사용자 세부정보에 대한 동적 경로를 생성할 수 있습니다. 이 매개변수는 $route 객체를 통해 구성요소 내에서 얻을 수 있습니다.

그렇다면 Vue 라우팅에서 매개변수를 어떻게 설정하나요? 이 글에서는 Vue Router를 더 잘 사용할 수 있도록 Vue 라우팅 매개변수를 설정하는 방법을 자세히 소개합니다.

1. 기본 매개변수 설정

Vue 라우팅에서는 다음과 같은 방법으로 라우팅 매개변수를 설정할 수 있습니다.

{
  path: '/user/:id',
  component: User
}

위의 예에서는 "/user/:id" 경로를 정의했습니다. 여기서 ":id"는 매개변수를 나타냅니다. 이름. 예를 들어 "/user/123"에 액세스하면 "id" 매개변수의 값은 "123"이 됩니다.

구성 요소 내에서 이 매개 변수에 액세스하는 것은 매우 간단합니다. $route 객체의 params 속성을 사용하면 됩니다.

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id
  }
}

구성 요소에서 props 속성을 사용하여 "id" 매개 변수를 구성 요소에 바인딩할 수 있습니다. 구성 요소 내에서 this.$route.params.id를 통해 "id" 매개변수 값에 액세스할 수 있습니다.

2. 선택적 매개변수 설정

Vue 라우팅에서는 기본 매개변수 외에도 선택적 매개변수를 정의할 수도 있습니다. 이 경우 매개변수 이름 뒤에는 물음표 "?"가 옵니다.

{
  path: '/user/:id?',
  component: User
}

위의 예에서 ":id?"는 "id" 매개변수가 선택사항임을 의미합니다. "/user" 경로에 액세스할 때 잘못된 경로 일치가 발생하지 않습니다.

구성 요소 내에서 $route 개체의 쿼리 속성을 사용하여 선택적 매개 변수의 값에 액세스할 수 있습니다. 예:

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id || this.$route.query.id
  }
}

위의 예에서는 ES6 구문을 사용하여 기본값을 제공했습니다. URL에 "id" 매개변수가 제공되지 않으면 쿼리 속성을 사용하여 이를 가져옵니다.

3. 이름이 지정된 매개변수 설정

기본 매개변수와 선택적 매개변수 외에도 이름이 지정된 매개변수를 사용하여 경로 간에 매개변수를 안전하게 전송할 수도 있습니다. 명명된 매개변수를 사용하면 경로에 전달되는 매개변수를 더 명시적으로 나타낼 수 있습니다.

경로 정의의 "name" 속성을 사용하여 경로 이름을 지정할 수 있습니다. 예:

{
  path: '/user/:id',
  component: User,
  name: 'user'
}

위의 예에서는 "name" 속성을 사용하여 경로 이름을 "user"로 지정했습니다.

구성 요소 내에서 전용 "$router" 및 "$route" 객체를 통해 이 이름 매개변수에 액세스할 수 있습니다. 예:

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id
  },
  methods: {
    goBack () {
      this.$router.push({ name: 'user', params: { id: this.id } })
    }
  }
}

위의 예에서는 name 매개변수를 사용하여 경로를 정의하고 "goBack" 메서드에서 경로 이름을 사용하여 경로를 반환합니다.

Vue 라우팅에서는 매개변수 설정이 매우 중요합니다. 기본 매개변수, 선택적 매개변수, 명명된 매개변수는 서로 다른 방식으로 설정되므로 이러한 다양한 방식을 이해해야 합니다. 이제 이러한 매개변수를 설정하는 방법을 알았으므로 이 기사가 Vue Router를 더 잘 사용하는 데 도움이 되기를 바랍니다.

위 내용은 Vue 라우팅 매개변수 설정 방법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!