Bagaimana untuk mendapatkan parameter bar alamat dalam Vue3

Vue3 mempunyai dua cara untuk mendapatkan parameter bar alamat: parameter pertanyaan dan parameter laluan.

Vue3 memperoleh parameter bar alamat daripada penghala penghalaan Parameter pertanyaan dan parameter laluan diperoleh dengan cara yang berbeza.

1. Parameter pertanyaan

Sebagai contoh, alamat http://127.0.0.1:5173/?code=123123,
Jika kita ingin mendapatkan parameter kod, kita boleh dapatkannya daripada penghala. Ambil perhatian bahawa ia adalah pertanyaan

Mula-mula anda perlu menentukan laluan dalam penghala/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

Kemudian anda boleh mendapatkan parameter pertanyaan melalui useRouter dalam komponen

<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. Parameter laluan

Parameter laluan bermaksud bahawa parameter disambungkan dalam bar alamat.
Contohnya, alamat http://127.0.0.1:5173/123123
123123 terakhir ialah parameter.

Parameter jenis ini mesti ditakrifkan dahulu dalam laluan dan parameter mesti dinamakan dalam laluan Dalam kod berikut: kod adalah untuk menamakan kod parameter laluan

Pertama sekali. , ia perlu ditakrifkan dalam penghala/index.js Penghalaan yang baik dan parameter laluan

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

Kemudian anda boleh mendapatkan parameter melalui laluan useRouter dalam komponen home.vue >

<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>

route.params 3. Nota

pintu masuk Halaman

mesti mentakrifkan tag

Anda tidak boleh hanya memperkenalkan komponen rumah yang ditakrifkan di atas terus ke dalam App.vue Jika anda memperkenalkannya secara langsung tidak akan dihalakan, jadi parameter penghalaan tidak boleh diperoleh melalui router-view Contoh ralat App.vueuseRouter adalah seperti berikut:

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

</template>

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

Perkara yang betul ialah menggunakan tag

rreeee

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan parameter bar alamat dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!