Cara menggunakan penghalaan penghala untuk melaksanakan parameter lompat dalam vue3

1. Lompat laluan

1 mula-mula memperkenalkan API—useRouter

import { useRouter } from 'vue-router'

pada halaman yang perlu dilompat 2. Tentukan pembolehubah penghala pada halaman lompat

//先在setup中定义
 const router = useRouter()

3. Gunakan router.push untuk melompat ke halaman

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

4. Jika terdapat parameter, perkenalkan API–useRoute

import { useRoute } from 'vue-router'

pada halaman penerimaan 5. Tentukan laluan pembolehubah pada halaman penerima dan dapatkan Pembolehubah yang diluluskan

//首先在setup中定义
const route = useRoute()
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;

2. Perhatikan pemindahan parameter halaman

1. Jika laluan disediakan, param akan diabaikan, tetapi ini tidak berlaku untuk pertanyaan . Pada masa ini, anda perlu memberikan nama laluan atau melengkapkannya dengan laluan tulisan tangan dengan parameter

const userId = '123'
router.push({ name: 'user', params: { userId }})
router.push({ path: `/user/${userId}` })
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }})

2 Peraturan di atas juga digunakan pada atribut kepada komponen pautan penghala
3 . Jika destinasi adalah sama dengan laluan semasa, hanya parameter yang telah berubah (contohnya, daripada data pengguna kepada /users/1 -> /users/2 yang lain), anda perlu menggunakan beforeRouteUpdate untuk bertindak balas kepada perubahan ini. (seperti merebut maklumat pengguna)

Atas ialah kandungan terperinci Cara menggunakan penghalaan penghala untuk melaksanakan parameter lompat dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!