1、概念：
A、vue 路由传参的使用场景一般应用在父路由跳转到子路由时，携带参数跳转。
B、传参方式可划分为 params 传参和 query 传参；
C、而 params 传参又可分为在 url 中显示参数和不显示参数两种方式；
D、即vue路由传参的三种方式：query传参（显示参数）、params传参（显示参数）、params传参（不显示参数）2、常见场景：
A、点击列表详情，跳转到详情内页，传递id参数获取详情数据。
B、在输入框输入内容后，点击搜索，跳转到搜索页面，并把输入的内容一起带到搜索页面
方式一：query传参（显示参数）
编程式父组件->>>子组件
定义两个组件
father.vue
<script setup>
import {useRouter} from "vue-router";
import Son from "./Son.vue";
let router=useRouter();
function goSon(){let o={name:'son',path:'/son',query:{name:'李四',age:23,subjects:['数学','语文','体育','历史','科学']},}router.push(o)
}
</script><template><button @click="goSon">去儿子组件</button></template><style scoped></style>son.vue组件
<script setup>
import {useRouter,useRoute} from "vue-router";let router=useRouter();
let route=useRoute();
function goFather(){console.log(route.query)router.push('/father')
}
</script>
<template>
<button @click="goFather">去父亲组件</button><br>
</template>
<style scoped></style>测试结果
方式二：params传参（显示参数）
params传参（不显示参数）也可分为 声明式 和 编程式 两种方式，与方式一不同的是，这里是通过路由的别名 name 进行传值的,需要配置路由name属性
let routers=[{path:'/father',name:'father',component:()=>import( '../components/Father.vue')},{path: '/son/:subjects?',name:'son',component:()=>import('../components/Son.vue')}
];
export default routers;父组件传入参数
<script setup>
import {useRouter} from "vue-router";
import Son from "./Son.vue";
let router=useRouter();
function goSon(){let o={name:'son',path:'/son',params:{subjects:false}}router.push(o)
}
</script><template><button @click="goSon">去儿子组件</button><Son name="李四"></Son>
</template><style scoped></style>子组件接收参数
<script setup>
import {useRouter,useRoute} from "vue-router";let router=useRouter();
let route=useRoute();
function goFather(){console.log(route.params)router.push('/father')
}
import {defineProps}from'vue'
let prop=defineProps(["name"]);
</script>
<template>
<button @click="goFather">去父亲组件</button><br>{{prop.name}}</template><style scoped></style>测试结果
常见错误：
不配置name属性
子组件不写接收参数
配置路由时，单词写错
配置单词一个都不能错
params传参与query传参区别：
1.使用query传参，类似于get请求；使用params传参，类似于post请求。
2.query的语法用于path编写的传参地址，也可用于name编写的传参地址；params的语法必须用于name编写的传参地址
3.query传递显示参数，刷新页面，参数不丢失；params传递不显示参数，刷新页面，参数丢失；params相对于query来说较安全一点