ルータールーティングを使用して vue3 でジャンプパラメータを実装する方法

1. ルートジャンプ

1. まず、ジャンプするページで useRouter

import { useRouter } from 'vue-router'

という API を導入します 2. ジャンプページでルーター変数を定義します

//先在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. 変数ルートを定義します受信ページで、渡された変数

//首先在setup中定义
const route = useRoute()
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;

を取得します。 2. ページでパラメータを渡すときは注意してください

1. パスが指定されている場合、パラメータは無視されますが、これは無視されます。クエリの場合です。このとき、ルートの名前を指定するか、パラメーター

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

2 を使用してパスを手書きで完成させる必要があります。上記のルールは、ルーターリンク コンポーネントの to 属性にも適用されます
3. 宛先が現在のルートと同じで、パラメーターのみが変更されている場合 (たとえば、ユーザー データから別の /users/1 -> /users/2)、 beforeRouteUpdate を使用して応答する必要があります。この変更 (ユーザー情報の取得など)

以上がルータールーティングを使用して vue3 でジャンプパラメータを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。