vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的方法
大家好，今天和大家分享一下vue3中如何進(jìn)行跳轉(zhuǎn)并進(jìn)行傳參。
前言
vue3取消了vue2部分api，所以路由跳轉(zhuǎn)和傳值的方式會(huì)有所不同。
我們今天主要講router.push(location, onComplete?, onAbort?)
vue3中新增API：useRouter和useRoute
一、路由跳轉(zhuǎn)
1.首先在需要跳轉(zhuǎn)的頁(yè)面引入API—useRouter
import { useRouter } from 'vue-router'2.在跳轉(zhuǎn)頁(yè)面定義router變量
//先在setup中定義 const router = useRouter()
3.用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' }})4.如果有參數(shù)的話，在接收頁(yè)面引入API–useRoute
import { useRoute } from 'vue-router'5.在接收頁(yè)面定義變量route，獲取傳過(guò)來(lái)的變量
//首先在setup中定義 const route = useRoute() //query let userId=route.query.userId; //params let userId=route.params.userId;
二、頁(yè)面?zhèn)鲄⑿枰⒁?/h2>
1.如果提供了 path，params 會(huì)被忽略，但query 沒(méi)有這種情況，此時(shí)需要提供路由的 name 或手寫(xiě)完整的帶有參數(shù)的 path
const userId = '123'
router.push({ name: 'user', params: { userId }})
router.push({ path: `/user/${userId}` })
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }})2.上述規(guī)則同樣適用于 router-link 組件的 to 屬性
3.如果目的地和當(dāng)前路由相同，只有參數(shù)發(fā)生了改變 (比如從一個(gè)用戶資料到另一個(gè) /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 來(lái)響應(yīng)這個(gè)變化 (比如抓取用戶信息)
總結(jié)
到此這篇關(guān)于vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的文章就介紹到這了,更多相關(guān)vue3路由跳轉(zhuǎn)傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue中this.$router.go(-1)失效(路由改變了，界面未刷新)
- vue3使用vue-router嵌套多級(jí)路由的方法
- vue中路由router配置步驟詳解
- 在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題
- Vue?router?路由安裝及使用過(guò)程
- 解讀Vue-Router?使用?prams?路由傳參失效
- vue使用動(dòng)態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
- vue3使用vue-router及路由權(quán)限攔截方式
- Vue3使用vue-router如何實(shí)現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
- Vue中vue-router路由使用示例詳解
相關(guān)文章
vue axios攔截器常用之重復(fù)請(qǐng)求取消
我們大家在開(kāi)發(fā)中,經(jīng)常會(huì)遇到接口重復(fù)請(qǐng)求導(dǎo)致的各種問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于axios攔截器之重復(fù)請(qǐng)求取消的相關(guān)資料,需要的朋友可以參考下2021-09-09
關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化
這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽(tīng)數(shù)組變化，對(duì)vue感興趣的同學(xué)，必須得參考下2021-04-04
vue3.0 CLI - 3.2 路由的初級(jí)使用教程
這篇文章主要介紹了vue3.0 CLI - 3.2 - 路由的初級(jí)使用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue3?v-bind="$attrs"繼承組件全部屬性的解決方案
這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Composition Api封裝業(yè)務(wù)hook思路示例分享
這篇文章主要為大家介紹了Composition Api封裝業(yè)務(wù)hook的思路示例分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue項(xiàng)目啟動(dòng)出現(xiàn)cannot GET /服務(wù)錯(cuò)誤的解決方法
這篇文章主要介紹了vue項(xiàng)目啟動(dòng)出現(xiàn)cannot GET /服務(wù)錯(cuò)誤的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家介紹了tauri和vue通信的問(wèn)題解決方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
Element實(shí)現(xiàn)登錄+注冊(cè)的示例代碼
登錄注冊(cè)是最常用的網(wǎng)站功能,本文主要介紹了Element實(shí)現(xiàn)登錄+注冊(cè)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)
這篇文章主要介紹了vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當(dāng)父組件改變了某個(gè)值后，如果這個(gè)值傳給了子組件，那么子組件也會(huì)自動(dòng)跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個(gè)值2023-03-03