Vue は、フロントエンド開発に広く使用されている人気の JavaScript フレームワークです。 Vue Router は、開発者が SPA (Single Page Application) のルーティング機能を簡単に実装できる公式ルーティング管理ツールです。 Vue Router では通常、ルーティング パラメーターを使用して動的にページを切り替えます。ただし、特定のシナリオでは、ルーティング パラメーターを非表示にして暗号化する必要がある場合があります。この記事では、Vue でルーティング パラメーターを非表示にする方法を紹介します。
1. ルーティング パラメーターの基本的な使用法
Vue Router では、ルーティング パラメーターはコロン接頭辞を使用して定義されます (例:
{ path: '/user/:id', component: User }
上記のコードでは、次のように定義します) 「id」という名前のルーティング パラメータ。ユーザーが「/user/1」にアクセスしたときに、対応するユーザー情報を動的に表示できます。コンポーネントでは、$route.params を介して現在のルーティング パラメーターの値にアクセスできます (例:
const User = { template: '<div>{{ $route.params.id }}</div>' }
2)。ルーティング パラメーターの非表示
実際の開発では、ルーティングを行いたい場合があります。ユーザー ID が暗号化されるなど、パラメーターは非表示になります。これにより、システムのセキュリティが向上し、ユーザーが URL パラメーターを改ざんして他の人のデータにアクセスするのを防ぐことができます。ルーティングパラメータを非表示にする機能を実現するには、Vue Router が提供する「Path Parameter Rewrite (Rewrite)」機能を使用します。具体的には、ルーティング設定に beforeEnter 関数を追加することで、ルーティング パラメータの値を再定義できます。例:
{ path: '/user/:id', component: User, beforeEnter: (to, from, next) => { // 将id进行加密 const id = encrypt(to.params.id) next({ path: `/user/${id}` }) } }
上記のコードでは、「beforeEnter」という名前の関数を定義します。ユーザーがルートにアクセスします。この関数では、元のルーティング パラメータを暗号化し、次の関数を通じてジャンプ ルートのパスを暗号化されたパス値に変更することで、ルーティング パラメータを非表示にします。
3. ルーティング パラメータの復号化
ルーティング パラメータが非表示の場合、実際のパラメータ値を取得するには、コンポーネント内のルーティング パラメータを復号化する必要があります。この機能を実現するには、コンポーネントの作成されたライフ サイクル関数でルーティング パラメーターを復号化できます。たとえば、次のようになります。
const User = { template: '<div>{{ realId }}</div>', data() { return { realId: '' } }, created() { // 获取加密后的id路由参数 const id = this.$route.params.id // 解密id this.realId = decrypt(id) } }
上記のコードでは、作成されたライフ サイクル関数を通じて暗号化されたルーティング パラメーターを取得します。復号化関数 decrypt を使用して実パラメータに変換し、復号化された値をコンポーネントのインスタンス変数 realId に保存します。テンプレートでは、realId 変数を通じて実際のルーティング パラメーター値を表示できます。
4. 概要
パス パラメーター書き換え関数を使用すると、Vue ルーティング パラメーターを簡単に非表示にして復号化できます。この技術により、システムのセキュリティを向上させ、無用なトラブルを回避できます。実際の開発では、Cookie、セッション、その他のテクノロジーを組み合わせて、システムのセキュリティをさらに向上させることもできます。
以上がVue ルーティング パラメータを非表示にする方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。