vue3中怎么使用router路由實現跳轉傳參

本文小編為大家詳細介紹“vue3中怎么使用router路由實現跳轉傳參”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue3中怎么使用router路由實現跳轉傳參”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一、路由跳轉

1.首先在需要跳轉的頁面引入API—useRouter

import { useRouter } from 'vue-router'

2.在跳轉頁面定義router變量

//先在setup中定義
 const router = useRouter()

3.用router.push跳轉頁面

// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢參數，變成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

4.如果有參數的話，在接收頁面引入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;

二、頁面傳參需要注意

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

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

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

讀到這里，這篇“vue3中怎么使用router路由實現跳轉傳參”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。