Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例詳解
更新時(shí)間：2023年04月14日 09:19:37 作者：Particular12.
這篇文章主要介紹了Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
一、路由跳轉(zhuǎn)
1、在需要跳轉(zhuǎn)的頁(yè)面
//引入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)頁(yè)面：
例：
// 字符串
router.push('home')
// 對(duì)象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢參數(shù)，變成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})2、如果有參數(shù)的話，在接收頁(yè)面引入API–useRoute
import { useRoute } from 'vue-router'
......
//在接收頁(yè)面定義變量route，獲取傳過(guò)來(lái)的變量
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;二、頁(yè)面?zhèn)鲄⑿枰⒁獾膯?wèn)題
1、如果提供了 path，params 會(huì)被忽略，但query 沒(méi)有這種情況，此時(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 }}) // -> /user2、上述規(guī)則同樣適用于 router-link 組件的 to 屬性
3、如果目的地和當(dāng)前路由相同，只有參數(shù)發(fā)生了改變 (比如從一個(gè)用戶資料到另一個(gè) /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 來(lái)響應(yīng)這個(gè)變化 (比如抓取用戶信息)
到此這篇關(guān)于Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的文章就介紹到這了,更多相關(guān)Vue3.0路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了解決vue里碰到 $refs 的問(wèn)題的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue項(xiàng)目中極驗(yàn)驗(yàn)證的使用代碼示例
這篇文章主要介紹了vue項(xiàng)目中極驗(yàn)驗(yàn)證的使用代碼示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
在vue中實(shí)現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測(cè)有效)
這篇文章主要介紹了在vue中實(shí)現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測(cè)有效)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示
這篇文章主要介紹了vue2.0如何實(shí)現(xiàn)echarts餅圖(pie)效果展示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開發(fā)的實(shí)例代碼
本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開發(fā)的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問(wèn)題
這篇文章主要介紹了解決VUE項(xiàng)目使用Element-ui 下拉組件的驗(yàn)證失效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
深入解析Vue源碼實(shí)例掛載與編譯流程實(shí)現(xiàn)思路詳解
這篇文章主要介紹了Vue源碼實(shí)例掛載與編譯流程實(shí)現(xiàn)思路詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮
這篇文章主要介紹了在Vue中實(shí)現(xiàn)隨hash改變響應(yīng)菜單高亮的方法，文中還通過(guò)實(shí)例代碼給大家介紹了vue關(guān)于點(diǎn)擊菜單高亮與組件切換的相關(guān)知識(shí),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Vue使用formData格式類型上傳文件的示例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09
Vue使用Cropper實(shí)現(xiàn)圖片裁剪功能
圖片裁剪功能無(wú)論是用戶頭像的裁剪,還是圖片內(nèi)容的精確調(diào)整,都成為了提升用戶體驗(yàn)的關(guān)鍵一環(huán),本文將詳細(xì)介紹如何在Vue.js項(xiàng)目中集成并使用Cropper.js實(shí)現(xiàn)一個(gè)強(qiáng)大的圖片裁剪組件,需要的可以參考下2024-11-11