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的v-if和v-show的區(qū)別圖文介紹,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
解決vue-cli@3.xx安裝不成功的問(wèn)題及搭建ts-vue項(xiàng)目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問(wèn)題及搭建ts-vue項(xiàng)目.文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue集成three.js并加載glb、gltf、FBX、json模型的場(chǎng)景分析
這篇文章主要介紹了Vue集成three.js，并加載glb、gltf、FBX、json模型,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
第一次寫(xiě)Vue項(xiàng)目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說(shuō)，先上代碼，我再講一些要注意的細(xì)節(jié)2022-12-12
vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置）
制作一個(gè)折線圖用于顯示當(dāng)前24小時(shí)的數(shù)據(jù)，并且可以通過(guò)拖動(dòng)折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來(lái)通過(guò)本文給大家分享vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置），感興趣的朋友跟隨一起學(xué)習(xí)吧2019-04-04
Vue檢測(cè)屏幕變化來(lái)改變不同的charts樣式實(shí)例
這篇文章主要介紹了Vue檢測(cè)屏幕變化來(lái)改變不同的charts樣式實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)
今天小編就為大家分享一篇vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue實(shí)現(xiàn)文字上下滾動(dòng)動(dòng)畫(huà)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)超酷文字上下滾動(dòng)動(dòng)畫(huà),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-03-03
這篇文章主要介紹了關(guān)于vue-cli3打包代碼后白屏的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue項(xiàng)目如何實(shí)現(xiàn)前端預(yù)覽word與pdf格式文件
最近項(xiàng)目中需要在線預(yù)覽WORD文檔,所以給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目如何實(shí)現(xiàn)前端預(yù)覽word與pdf格式文件的相關(guān)資料,需要的朋友可以參考下2023-03-03