Vue.jsでURLからパラメータを取得する方法

1. クエリパラメータの取得: URLのクエリパラメータを取得するには、this.$route.queryを使用します。以下のコード例を参考にしてください。

// URL: example.com?param1=value1&param2=value2
// クエリパラメータの取得
const param1 = this.$route.query.param1; // value1
const param2 = this.$route.query.param2; // value2

2. パスパラメータの取得: URLのパスパラメータを取得するには、this.$route.paramsを使用します。以下のコード例を参考にしてください。

// ルート定義: { path: '/user/:id', component: User }
// パスパラメータの取得
const userId = this.$route.params.id; // idには実際の値が入ります

3. 組み合わせた例: URLに同時にクエリパラメータとパスパラメータがある場合、以下のように組み合わせて使用できます。

// URL: example.com/user/123?param1=value1
// クエリパラメータの取得
const param1 = this.$route.query.param1; // value1
// パスパラメータの取得
const userId = this.$route.params.id; // 123

これらの方法を使用すると、Vue.jsで簡単にURLからパラメータを取得することができます。適切なコンポーネント内でこれらのコードを使用して、必要なパラメータを取得してください。