How to use router routing to implement jump parameters in vue3

1. Route jump

1. First introduce the API - useRouter

import { useRouter } from 'vue-router'

on the page that needs to be jumped. 2. Define the router variable on the jump page

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

3. Use router.push to jump to the page

// 字符串
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. If there are parameters, introduce API–useRoute

import { useRoute } from 'vue-router'

on the receiving page 5. Define the variable route on the receiving page to get the passed Variable

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

2. Pay attention to when passing parameters on the page

1. If path is provided, params will be ignored, but this is not the case for query. At this time, you need to provide the name of the route or complete it by handwriting path with parameters

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

2. The above rules also apply to the to attribute of the router-link component
3. If the destination is the same as the current route, only the parameters have changed (for example, from a user data to another /users/1 -> /users/2), you need to use beforeRouteUpdate to respond to this change (such as grabbing user information)

The above is the detailed content of How to use router routing to implement jump parameters in vue3. For more information, please follow other related articles on the PHP Chinese website!