Home > Web Front-end > Vue.js > body text

How to use router routing to implement jump parameters in vue3

WBOY
Release: 2023-05-16 10:49:06
forward
2232 people have browsed it

1. Route jump

1. First introduce the API - useRouter

import { useRouter } from 'vue-router'
Copy after login

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

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

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' }})
Copy after login

4. If there are parameters, introduce API–useRoute

import { useRoute } from 'vue-router'
Copy after login

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;
Copy after login

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 }})
Copy after login

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!

Related labels:
source:yisu.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template