Detailed explanation of Vue3.0 routing jump carrying parameters

1. Routing jump

1. On the page that needs to be redirected

//Introduce API---useRouterimport { useRouter } from 'vue-router'
......
//Define router variableconst router =useRouter()
const methodClick=(data)=&gt;{
let paramValue=
//Route jump, carrying parameters('/equipment/operation?deviceCode='+paramValue)

Use jump page：
example：
// String('home')
// Object({ path: 'home' })
// Named routes({ name: 'user', params: { userId: '123' }})
// With query parameters, become /register?userId=123({ path: 'register', query: { userId: '123' }})

2. If there are parameters, introduce API-useRoute on the receiving page

import { useRoute } from 'vue-router'
......
//Define the variable route on the receiving page to get the passed variableconst route = useRouter()
onMounted(() =&gt; {
	if () {
		state.codeDevice2 = 
	}
})

example：
//Define it first in the setupconst route = useRoute()
//query
let userId=;
//params
let userId=;

2. Issues that need to be paid attention to when passing page parameters

1. If path is provided, params will be ignored, but query does not have this case. At this time, you need to provide the routed name or a fully handwritten path with parameters.

const userId = '123'
({ name: 'user', params: { userId }}) // -&gt; /user/123
({ path: `/user/${userId}` }) // -&gt; /user/123
// The params here do not take effect({ path: '/user', params: { userId }}) // -&gt; /user

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

This is the article about Vue3.0 routing jump carrying parameters. For more related Vue3.0 routing jump content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!