Vue3でアドレスバーパラメータを取得する方法

Vue3 には、アドレス バー パラメーターを取得する 2 つの方法があります。クエリ パラメーターとパス パラメーターです。

Vue3 はルーティング ルーターからアドレス バー パラメーターを取得しますが、クエリ パラメーターとパス パラメーターは別の方法で取得されます。

1. クエリ パラメータ

たとえば、アドレス http://127.0.0.1:5173/?code=123123、
code パラメータを取得したい場合は、次のようになります。 query

まず、router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home.vue')
    },
  ]
})

export default router

でルートを定義する必要があります。次に、useRouter を使用してクエリ パラメータを取得できます。コンポーネント

<script setup>
import {useRouter} from &#39;vue-router&#39;

const { currentRoute } = useRouter();
const route = currentRoute.value;

onMounted(()=>{
  let code=route.query.code
  console.log(&#39;code&#39;, code)
})

</script>

2. パス パラメータ

パス パラメータは、アドレス バーに結合されたパラメータを指します。
たとえば、アドレス http://127.0.0.1:5173/123123
最後の 123123 がパラメータです。

この種のパラメータは最初にルートで定義する必要があり、ルートでパラメータに名前を付ける必要があります。次のコードでは: コードはパス パラメータに名前を付けるコードです。

最初に必要なものは、パス パラメータに名前を付けることです。 router/index.js で定義される 適切なルーティングおよびパス パラメーター

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/:code',
      name: 'home',
      component: () => import('../views/home.vue')
    },
  ]
})

export default router

その後、home.vue コンポーネントのルート useRouter を通じてパラメーターを取得できます。 ##

<script setup>
import {useRouter} from &#39;vue-router&#39;

const { currentRoute } = useRouter();
const route = currentRoute.value;

onMounted(()=>{
  let code=route.params.code
  console.log(&#39;code&#39;, code)
})

</script>

3. 注記

Entry page

App.vue

では

router-view タグを定義する必要があります。上記で定義したホーム コンポーネントを直接導入することはできません。 App.vue に直接導入するとルートにならないため、useRouter を通じてルーティング パラメータを取得できません。次のエラー例:

<template>
  <div id="app">
    <home></home>
  </div>

</template>

<script setup>
import home from &#39;./views/home.vue&#39;;
</script>

正しいのは、

router-view

tag

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script setup>

</script>

を使用することです。

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