vue3에서 라우터 라우팅을 사용하여 점프 매개변수를 구현하는 방법

1. 경로 점프

1. 먼저 점프해야 하는 페이지에 useRouter

import { useRouter } from 'vue-router'

를 소개합니다. 2. 점프 페이지에서 라우터 변수를 정의합니다.

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

3.

// 字符串
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!