Vue ルーティング パラメータを非表示にする方法について話しましょう

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 サイトの他の関連記事を参照してください。