vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法
大家好，今天和大家分享一下vue3中如何進行跳轉(zhuǎn)并進行傳參。
前言
vue3取消了vue2部分api，所以路由跳轉(zhuǎn)和傳值的方式會有所不同。
我們今天主要講router.push(location, onComplete?, onAbort?)
vue3中新增API：useRouter和useRoute
一、路由跳轉(zhuǎn)
1.首先在需要跳轉(zhuǎn)的頁面引入API—useRouter
import { useRouter } from 'vue-router'2.在跳轉(zhuǎn)頁面定義router變量
//先在setup中定義 const router = useRouter()
3.用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' }})4.如果有參數(shù)的話，在接收頁面引入API–useRoute
import { useRoute } from 'vue-router'5.在接收頁面定義變量route，獲取傳過來的變量
//首先在setup中定義 const route = useRoute() //query let userId=route.query.userId; //params let userId=route.params.userId;
二、頁面?zhèn)鲄⑿枰⒁?/h2>
1.如果提供了 path，params 會被忽略，但query 沒有這種情況，此時需要提供路由的 name 或手寫完整的帶有參數(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.如果目的地和當前路由相同，只有參數(shù)發(fā)生了改變 (比如從一個用戶資料到另一個 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 來響應(yīng)這個變化 (比如抓取用戶信息)
總結(jié)
到此這篇關(guān)于vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的文章就介紹到這了,更多相關(guān)vue3路由跳轉(zhuǎn)傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- vue中this.$router.go(-1)失效(路由改變了，界面未刷新)
- vue3使用vue-router嵌套多級路由的方法
- vue中路由router配置步驟詳解
- 在vue中路由使用this.$router.go(-1)返回兩次問題
- Vue?router?路由安裝及使用過程
- 解讀Vue-Router?使用?prams?路由傳參失效
- vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
- vue3使用vue-router及路由權(quán)限攔截方式
- Vue3使用vue-router如何實現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
- Vue中vue-router路由使用示例詳解
相關(guān)文章
這篇文章主要介紹了Vue的v-if和v-show的區(qū)別圖文介紹,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項目
這篇文章主要介紹了解決vue-cli@3.xx安裝不成功的問題及搭建ts-vue項目.文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
Vue集成three.js并加載glb、gltf、FBX、json模型的場景分析
這篇文章主要介紹了Vue集成three.js，并加載glb、gltf、FBX、json模型,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
第一次寫Vue項目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說，先上代碼，我再講一些要注意的細節(jié)2022-12-12
vue+echarts實現(xiàn)可拖動節(jié)點的折線圖（支持拖動方向和上下限的設(shè)置）
制作一個折線圖用于顯示當前24小時的數(shù)據(jù)，并且可以通過拖動折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來通過本文給大家分享vue+echarts實現(xiàn)可拖動節(jié)點的折線圖（支持拖動方向和上下限的設(shè)置），感興趣的朋友跟隨一起學習吧2019-04-04
這篇文章主要介紹了Vue檢測屏幕變化來改變不同的charts樣式實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue 驗證碼界面實現(xiàn)點擊后標灰并設(shè)置div按鈕不可點擊狀態(tài)
今天小編就為大家分享一篇vue 驗證碼界面實現(xiàn)點擊后標灰并設(shè)置div按鈕不可點擊狀態(tài)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)超酷文字上下滾動動畫,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下2024-03-03
這篇文章主要介紹了關(guān)于vue-cli3打包代碼后白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue項目如何實現(xiàn)前端預(yù)覽word與pdf格式文件
最近項目中需要在線預(yù)覽WORD文檔,所以給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue項目如何實現(xiàn)前端預(yù)覽word與pdf格式文件的相關(guān)資料,需要的朋友可以參考下2023-03-03