//引入API---useRouter
import { useRouter } from 'vue-router'
......
//定義router變量
const router =useRouter()
const methodClick=(data)=>{
let paramValue=data.deviceCode
//路由跳轉(zhuǎn)，攜帶參數(shù)
router.push('/equipment/operation?deviceCode='+paramValue)

用router.push跳轉(zhuǎn)頁面：
例：
// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢參數(shù)，變成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

2、如果有參數(shù)的話，在接收頁面引入API–useRoute

import { useRoute } from 'vue-router'
......
//在接收頁面定義變量route，獲取傳過來的變量
const route = useRouter()
onMounted(() => {
	if (route.currentRoute.value.query.deviceCode) {
		state.codeDevice2 = route.currentRoute.value.query.deviceCode
	}
})

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

二、頁面?zhèn)鲄⑿枰⒁獾膯栴}

1、如果提供了 path，params 會被忽略，但query 沒有這種情況，此時(shí)需要提供路由的 name 或手寫完整的帶有參數(shù)的 path

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

2、上述規(guī)則同樣適用于 router-link 組件的 to 屬性
3、如果目的地和當(dāng)前路由相同，只有參數(shù)發(fā)生了改變 (比如從一個用戶資料到另一個 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 來響應(yīng)這個變化 (比如抓取用戶信息)

到此這篇關(guān)于Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的文章就介紹到這了,更多相關(guān)Vue3.0路由跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: