Comment utiliser le routage du routeur pour implémenter les paramètres de saut dans vue3

1. Route jump

1. Introduisez d'abord l'API - useRouter

import { useRouter } from 'vue-router'

sur la page qui doit être sautée 2. Définissez la variable du routeur sur la page de saut

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

3.

// 字符串
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. S'il y a des paramètres, introduisez l'API sur la page de réception - useRoute

import { useRoute } from 'vue-router'

5 Définissez la route des variables sur la page de réception et obtenez les variables transmises

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

2.

1. Si le chemin est fourni, les paramètres seront ignorés, mais ce n'est pas le cas pour la requête. À ce stade, vous devez fournir le nom de l'itinéraire ou écrire à la main le chemin complet avec les paramètres

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

2. s'applique également à l'attribut to du composant router-link
3 Si la destination et l'itinéraire actuel sont les mêmes, seuls les paramètres ont changé (par exemple d'un profil utilisateur à un autre /users/1 -> /users/. 2), vous devez utiliser beforeRouteUpdate pour répondre à ce changement (comme récupérer des informations utilisateur)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!