vue3中，通过路由传参的几种形式

1.query传参

// 在路由信息中，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.params传参【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.state传参

// 在路由信息中，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中几种传参的优缺点：

优点：通过路由传参时，参数值都是持久存储的，除非手动改变地址，另外，通过state传参时，参数不会暴露在地址中；

query传参时，参数会暴露在地址栏，params传参时，需要在路由信息中配置参数名称，且参数值也会在地址中暴露，相对繁琐

以上内容是本人在开发过程中的积累，如有雷同，纯属巧合。如有错误，欢迎在评论区指出，谢谢！