Vue 라우팅 매개변수에서 중국어 왜곡 문자를 해결하는 방법

Vue를 개발에 사용할 때 "라우팅 매개변수" 기능을 사용해야 하는 경우가 종종 있는데, 전달되는 매개변수에 한자가 포함되어 한자가 깨져버리는 문제가 발생하는 경우가 있습니다. 이는 브라우저의 URL이 ASCII 인코딩만 허용하고 한자 인코딩을 지원하지 않기 때문에 한자를 전송할 때 잘못된 문자가 표시되기 때문입니다. 이 글에서는 Vue에서 이 문제를 해결하는 방법을 소개합니다.

해결 방법

1. encodeURIComponent() 함수 사용

한자를 경로에 전달할 때 JavaScript의 encodeURIComponent() 함수를 사용하여 인코딩할 수 있습니다. 이 기능의 기능은 한자가 URL에서 올바르게 전송될 수 있도록 한자를 URL 인코딩으로 변환하는 것입니다.

코드 예:

this.$router.push({
    path: '/detail',
    query: {
        id: 1,
        title: encodeURIComponent('这是中文标题')
    }
})

참고: 이 방법을 사용하려면 전달된 매개변수를 수신하는 페이지에서 디코딩이 필요합니다. 디코딩 방법은 decodeURIComponent() 함수입니다.

2. vue-router의 매개변수 사용

vue-router를 사용하여 라우팅을 위한 매개변수를 전달할 때 매개변수를 전달하는 방법에는 두 가지가 있습니다. 하나는 쿼리를 사용하는 것이고, 다른 하나는 매개변수를 사용하는 것입니다. params는 쿼리 매개변수가 아닌 라우팅 주소에 매개변수를 추가하는 것입니다. 이를 통해 중국어 문자 왜곡 문제를 피할 수 있습니다.

코드 예:

this.$router.push({
    path: `/detail/${encodeURIComponent('这是中文标题')}`,
    params: {
        id: 1
    }
})

참고: 이때 라우팅 매개변수의 동적 경로를 선언해야 합니다.

3. 한자는 영어 또는 유니코드 코드를 직접 사용합니다

라우트 매개변수가 아닌 그냥 일반 문자열인 경우에는 한자에 대한 영어 표현이나 유니코드 코드를 직접 사용하여 중국어 문자 깨짐 문제를 피할 수도 있습니다.

코드 예시:

console.log('这是一段中文字符') // 输出这是一段中文字符
console.log('\u8FD9\u662F\u4E00\u6BB5\u4E2D\u6587\u5B57\u7B26') // 输出这是一段中文字符

요약

이 글에서는 Vue에서 한자를 전송하는 올바른 방법을 소개합니다. encodeURIComponent() 함수 인코딩을 사용하고, vue-router의 params 매개변수를 사용하고, 영어 표기법을 직접 사용하거나, 유니코드 방식으로 실제 상황에 맞게 선택하여 사용할 수 있습니다.

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