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