라우팅 없이 Vue에서 URL 매개변수를 얻는 방법

프런트엔드 기술의 지속적인 발전과 함께 Vue는 가장 인기 있는 프런트엔드 프레임워크 중 하나로 업계에서 널리 사용되고 있습니다. Vue에서는 라우팅을 통해 URL 매개변수를 얻는 것이 일반적인 요구 사항이며 일상적인 개발에서 직면하는 일반적인 문제이기도 합니다. 그러나 때로는 특별한 비즈니스 요구 사항으로 인해 라우팅을 통해 URL 매개변수를 얻고 싶지 않은 경우도 있습니다. 이 기사에서는 Vue가 라우팅 없이 URL 매개변수를 얻는 방법을 소개합니다.

먼저 라우팅이 URL 매개변수를 얻는 방법을 이해하겠습니다. Vue에서는 this.$route.query를 통해 URL 매개변수를 얻을 수 있습니다. 예를 들어, URL의 매개변수가 ?id=1인 경우 다음과 같은 방법으로 얻을 수 있습니다.

this.$route.query.id  // 1

그러나 어떤 경우에는 복잡한 비즈니스로 인해 라우팅을 통해 URL 매개변수를 얻고 싶지 않을 수도 있습니다. 로직이나 디자인 솔루션 등이요. 잠깐만요. 이 경우 window 객체를 통해 URL 매개변수를 얻을 수 있습니다.

다음은 URL이 http://localhost:8080?id=1이라고 가정하는 간단한 예입니다.

먼저 URL을 얻으려면 기본 JavaScript 코드를 사용해야 합니다. 코드는 다음과 같습니다.

let url = window.location.search

위 코드에서 window.location.search는 "?" 및 "="와 같은 특수 문자를 포함한 URL 매개변수를 얻을 수 있습니다.

다음으로 URL의 매개변수 값을 가로채야 합니다. 코드는 다음과 같습니다.

let params = {}
if (url.indexOf('?') !== -1) {
    let arr = url.split('?')[1].split('&')
    arr.forEach((item) => {
        let val = item.split('=')
        params[val[0]] = val[1]
    })
}

위 코드에서는 먼저 if 문을 사용하여 URL에 "?" 문자가 포함되어 있는지 확인합니다. 포함된 경우 분할 방법을 사용하여 매개변수 부분을 분리하고, 루프 및 분할 방법을 사용하여 각 키-값 쌍을 분리합니다. 마지막으로 매개변수 이름과 매개변수 값을 키-값 쌍의 형태로 객체에 저장합니다.

마지막으로 params 객체를 사용하여 URL 매개변수 값을 얻을 수 있습니다. 예를 들어 위 URL의 경우 다음과 같은 방법으로 매개변수 값을 얻을 수 있습니다.

params.id  // 1

요약하면 라우팅을 사용하지 않고 창 개체를 통해 URL 매개변수를 가져올 수 있습니다. 물론 어떤 접근 방식을 사용할지는 특정 비즈니스 요구 사항과 설계 옵션에 따라 달라집니다.

간단히 말하면 Vue는 매우 인기 있는 프런트엔드 프레임워크입니다. Vue를 학습하는 과정에서 필연적으로 URL 매개변수를 얻어야 하는 필요성에 직면하게 됩니다. 이 기사에 소개된 두 가지 방법을 통해 라우팅 없이 URL 매개변수를 얻는 기술을 익히고 복잡한 비즈니스 요구에 더 잘 대처할 수 있습니다.

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