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路由實現跳轉傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章!