vueでジャンプパスパラメータを取得する方法

Vue でルーティング ジャンプを実行する場合、多くの場合パラメーターを渡す必要があります。では、ターゲットページに渡されたパラメータを取得するにはどうすればよいでしょうか?この記事では、Vueでジャンプパスのパラメータを取得する方法を紹介します。

Vue でルートをジャンプするには 2 つの方法があります。vue-router プラグインを使用するか、ページ内で window.location.href を直接使用してジャンプします。どちらの方法でも、ジャンプ パス パラメータを取得する方法は似ています。

ルート ジャンプに vue-router プラグインを使用する

vue-router は、Vue が提供する公式のルーティング プラグインで、Vue でのルーティングの制御に役立ちます。 vue-router では、ジャンプ パス パラメータを含む現在のルート情報を $route オブジェクトを通じて取得できます。

次のようなルーティング構成があるとします:

{
  path: '/detail/:id',
  component: Detail
}

ここでの :id は、これがルーティングを介して渡すことができるパス パラメーターであることを示します。たとえば、/detail/123 は詳細を表します。 ID 123 のページ。

ターゲット ページの詳細では、$route.params を通じて渡されたパラメーターを取得できます。コードは次のとおりです。

export default {
  name: 'Detail',
  mounted() {
    const id = this.$route.params.id; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

マウントされたフックでは、ジャンプ パスに渡される id パラメーターは this.$route.params.id を通じて取得できます。

ルート ジャンプのために window.location.href をページ内で直接使用する

Vue では、ページ ジャンプのために window.location.href を直接使用することもできます。例:

window.location.href = '/detail?id=123';

ここでは、id パラメータをジャンプ URL に結合します。ターゲット ページでこのパラメータを取得する方法を見てみましょう。

location.search を使用してジャンプ パス内の疑問符の後のパラメーター部分を取得し、通常のマッチングを使用して必要なパラメーターの値を取得できます。コードは次のとおりです。

export default {
  name: 'Detail',
  mounted() {
    const query = location.search.substring(1); // 获取跳转路径参数字符串，去掉问号
    const reg = new RegExp(`(^|&)id=([^&]*)(&|$)`); // 匹配id参数的正则表达式
    const id = query.match(reg)[2]; // 获取跳转路径参数id的值
    console.log('id:', id);
  }
};

上記のコードは、正規表現を使用して id パラメーターの値を照合し、それを変数 id に格納します。

概要

Vue でジャンプ パス パラメーターを取得する方法は非常に簡単です。vue-router プラグインを使用する場合でも、window.location.href を直接使用してジャンプする場合でも、次の方法を利用できます。 $ ルートまたはロケーション オブジェクトを使用して、渡されたパラメーターを取得します。この記事では 2 つの方法を紹介しますが、開発者は実際の状況に応じて適切な方法を選択できます。

以上がvueでジャンプパスパラメータを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。