Vue RouterとuseRouteコンポジションAPIフックでURLクエリパラメータを簡単操作
Vue.js で URL からクエリパラメータを取得する方法
this.$route.query プロパティを使用する
vue-router を使用している場合、this.$route.query プロパティを使用して、URL のクエリパラメータにアクセスできます。このプロパティはオブジェクトで、各クエリパラメータの名前がキー、値が値として格納されています。
<template>
<div>
<p>ID: {{ this.$route.query.id }}</p>
<p>名前: {{ this.$route.query.name }}</p>
</div>
</template>
<script>
export default {
// ...
}
</script>
上記の例では、/users/1?name=Taro のような URL にアクセスすると、this.$route.query.id は 1、this.$route.query.name は Taro になります。
useRoute コンポジション API フックを使用する
Vue 3 では、useRoute コンポジション API フックを使用して、this.$route オブジェクトと同じ情報を取得できます。
<template>
<div>
<p>ID: {{ route.query.id }}</p>
<p>名前: {{ route.query.name }}</p>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// ...
</script>
上記の例は、useRoute フックを使用して route 変数に this.$route オブジェクトを代入し、その query プロパティを使用してクエリパラメータにアクセスする方法を示しています。
補足
- クエリパラメータが存在しない場合、
undefinedが返されます。 - 複数のクエリパラメータを持つキーの場合、配列として返されます。
- URL エンコードされたクエリパラメータ値をデコードするには、
decodeURIComponent()関数を使用する必要があります。
これらの方法を理解することで、Vue.js アプリケーションで URL からクエリパラメータを簡単に取得し、処理することができます。
<template>
<div>
<p>ID: {{ this.$route.query.id }}</p>
<p>名前: {{ this.$route.query.name }}</p>
<p>年齢: {{ this.$route.query.age || 20 }}</p>
</div>
</template>
<script>
export default {
// ...
}
</script>
この例では、以下の URL にアクセスすると、以下の結果が表示されます。
/users/1?name=Taro&age=30:- ID: 1
- 名前: Taro
- 年齢: 30
<template>
<div>
<p>ID: {{ route.query.id }}</p>
<p>名前: {{ route.query.name }}</p>
<p>年齢: {{ route.query.age || 20 }}</p>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// ...
</script>
この例は、1つ目の例と同じ結果を出力します。
- このコードは、Vue Router と Vue 3 を使用していることを前提としています。
このサンプルコードを参考に、自身のアプリケーションで URL からクエリパラメータを取得して処理してください。
Vue.js で URL からクエリパラメータを取得するその他の方法
window.location.search プロパティには、現在の URL のクエリ文字列が含まれています。このプロパティを使用して、クエリパラメータを解析し、必要な値を取得することができます。
<template>
<div>
<p>ID: {{ parseQueryString(window.location.search).id }}</p>
<p>名前: {{ parseQueryString(window.location.search).name }}</p>
</div>
</template>
<script>
function parseQueryString(queryString) {
const params = {};
const pairs = queryString.slice(1).split('&');
for (const pair of pairs) {
const [key, value] = pair.split('=');
params[key] = decodeURIComponent(value);
}
return params;
}
export default {
// ...
}
</script>
上記の例では、parseQueryString 関数を使用してクエリ文字列を解析し、オブジェクトに変換しています。このオブジェクトから、必要なクエリパラメータ値にアクセスすることができます。
URL ライブラリを使用する
URL 解析をより簡単に処理するために、URL ライブラリを使用することができます。いくつかの人気のあるライブラリを以下に紹介します。
これらのライブラリは、クエリ文字列の解析、エンコード、デコードなどの機能を提供します。
history.replaceState または history.pushState API を使用して、URL を変更し、新しいクエリパラメータを含めることができます。この方法は、SPA (Single Page Application) でクエリパラメータを変更する場合に役立ちます。
<template>
<div>
<button @click="updateQueryString">クエリパラメータを更新</button>
</div>
</template>
<script>
export default {
methods: {
updateQueryString() {
const newQuery = {
id: 10,
name: 'Taro'
};
const queryString = new URLSearchParams(newQuery).toString();
history.replaceState(null, null, `?${queryString}`);
}
}
}
</script>
上記の例では、updateQueryString メソッドを使用して、history.replaceState API を呼び出し、新しいクエリパラメータを含む URL に置き換えます。
注意事項
- 上記で説明した方法は、それぞれ長所と短所があります。状況に応じて最適な方法を選択してください。
javascript vue.js vue-router
