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 を使用してルーティングのパラメータを渡す場合、パラメータを渡すには 2 つの方法があります。1 つはクエリを使用する方法、もう 1 つはクエリを使用する方法です。もう 1 つは、vue-router を使用してパラメータを渡すことです。もう 1 つは、params を使用することです。 params はクエリパラメータとしてではなくルーティングアドレスにパラメータを追加するもので、これにより中国語の文字化けの問題を回避できます。

コード例:

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

注: この時点で、ルーティング パラメーターの動的ルーティングを宣言する必要があります。

3. 中国語の文字は英語または Unicode コードを直接使用します

ルーティング パラメータではなく単なる通常の文字列の場合は、中国語の文字を英語表記または直接使用することもできます。中国語の文字化けの問題を回避するための Unicode コード。

コード例:

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

概要

この記事では、encodeURIComponent() 関数のエンコードと vue の params パラメーターを使用して、Vue で中国語の文字を渡す正しい方法を紹介します。 -router 英語表記を直接使用する方法と Unicode コードを使用する方法の両方が実現可能であり、実際の状況に応じて使用することができます。

以上がvueルーティングパラメータの中国語文字化けを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。