ホームページ > 記事 > ウェブフロントエンド > vueでジャンプパスパラメータを取得する方法
Vue でルーティング ジャンプを実行する場合、多くの場合パラメーターを渡す必要があります。では、ターゲットページに渡されたパラメータを取得するにはどうすればよいでしょうか?この記事では、Vueでジャンプパスのパラメータを取得する方法を紹介します。
Vue でルートをジャンプするには 2 つの方法があります。vue-router プラグインを使用するか、ページ内で window.location.href を直接使用してジャンプします。どちらの方法でも、ジャンプ パス パラメータを取得する方法は似ています。
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 を通じて取得できます。
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 サイトの他の関連記事を参照してください。