Vue3でアドレスバーパラメータを取得する方法-Vue.js-php.cn

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

王林

リリース： 2023-05-15 22:25:04

転載

5721 人が閲覧しました

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

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

1. クエリパラメータ

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

まず、router/index.js

import { createRouter, createWebHistory } from &#39;vue-router&#39;

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

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 &#39;vue-router&#39;

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

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 サイトの他の関連記事を参照してください。

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

1. クエリ パラメータ

2. パス パラメータ

App.vue

1. クエリパラメータ

2. パスパラメータ