vue3页面跳转与路由的传参，以及跳转后的页面是如何接收参数的。

• query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
• query 在路由配置不需要设置参数，而 params 必须设置
• query 传递的参数会显示在地址栏中
• params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变

1. 路由跳转与query方式传参

item是一个对象

const toDetail = (item) => {
    router.push({
        path: '/reg', // 也可以写为 '/reg?name=张三&age=18'
        query: item
    })
}

2. 接收query方式传递过来的参数

import { useRoute } from 'vue-router';
const route = useRoute()
// 获取接收的参数
const name = route.query.name

3. 路由跳转与params方式传参

编程式导航，使用router push 或者 replace 的时候，改为对象形式并且只能使用name，path无效，然后传入params

const toDetail = (item) => {
    router.push({
        name: 'Reg',
        params: item
    })
}

4. 接收params方式传递过来的参数

接收参数的用法是一样的

import { useRoute } from 'vue-router';
const route = useRoute()
// 获取接收的参数
const name = route.query.name