vue3에서는 라우팅을 통해 여러 형태의 매개변수 전달이 가능합니다.

1. 쿼리 매개변수 전달

// 在路由信息中，path需要配置如下内容
{
    path: "/test",
    component: () => import("@/views/text/index.vue"),
    name: "Test",
    meta: {
        title: "测试模块",
    },
}

// 组件1中传参给组件2

// 组件1
const query = { id: 1, name: '张三' }
router.push({ path: '/test', query })

// 组件2【接收参数】
import { useRoute} from 'vue-router'

const route = useRoute()
console.log(route.query)

2. 매개변수를 전달하는 매개변수 [이 방법은 기본적으로 vue3에서는 폐기되었습니다.]

// 在路由信息中，path需要配置如下内容
{
    path: "/test/:id", // 注意，此处一旦配置参数，凡是进入此路由时，都需要传参，否则报错
    component: () => import("@/views/text/index.vue"),
    name: "Test",
    meta: {
        title: "测试模块",
    },
}

// 组件1中传参给组件2

// 组件1
router.push({
   name: 'Test', // 注意此处使用的是“name”
   params: {
       id: 1
   }
})

// 组件2【接收参数】
import { useRoute} from 'vue-router'

const route = useRoute()
console.log(route.params) // { id: 1 }

 3.상태 매개변수 전달

// 在路由信息中，path需要配置如下内容
{
    path: "/test",
    component: () => import("@/views/text/index.vue"),
    name: "Test",
    meta: {
        title: "测试模块",
    },
}

// 组件1中传参给组件2

// 组件1
const state= { id: 1, name: '张三' }
router.push({ path: '/test', state })

// 组件2【接收参数】
// 直接接收使用即可
console.log(history?.state?.id)
console.log(history?.state?.name)

vue3에 전달된 여러 매개변수의 장점과 단점:

장점: 라우팅을 통해 매개변수를 전달할 때 주소를 수동으로 변경하지 않는 한 매개변수 값은 지속적으로 저장되며, 또한 상태를 통해 매개변수를 전달할 때 매개변수가 주소에 노출되지 않습니다.

쿼리 매개변수가 전달되면 주소 표시줄에 매개변수가 노출되며, params 매개변수가 전달되면 라우팅 정보에서 매개변수 이름을 구성해야 하며 매개변수 값도 주소에 노출됩니다. 상대적으로 번거롭다.

위 내용은 개발 과정에서 제가 축적한 내용으로 유사점은 순전히 우연일 뿐입니다. 틀린 부분이 있으면 댓글로 지적해주시면 감사하겠습니다!