第一种：query(get传参)

传递参数：在路经上直接利用问号传参，多个参数用&隔开

在组件中接受参数：引入useRoute这个API来获取

也可以使用vue2中方法来获取：{{ $route.query.id }}

dian{{ $route.query.id }}import {useRoute} from 'vue-router'export default {setup(){var route = useRoute()function add(){ console.log(route.query);}return {add}}}

控制台输出：

第二种：params传参也叫动态路由传参

传递参数：在配置路由信息上传属性名

在路径上传递属性值

在组件中接收参数：引入useRoute这个API来获取

列表页面
{{$route.params}}import {useRoute} from 'vue-router'export default {setup(props){var route= useRoute()console.log(route.params)return{route}},}

控制台输出：

​​​​​​​​​​​​​​

第三种：meta（路由元信息）

在路由配置上传参：

{path:'/list',name:'list',meta:{xxoo:'xxx'//路由元信息},},

在组件中获取;

列表页面
{{$route.meta}}import {useRoute} from 'vue-router'export default {setup(props){var route= useRoute()console.log(route.meta)return{route}}, }

控制台输出;

第四种：porps传参

路由配置项里面写：

props:{name:'刘香',id:'18岁123'},

组件中接收：

props:{id:{type:string，//约束参数类型default:'默认参数'，//忘记传参的情况下会使用默认参数required:true}，name:{// 和上面的一样type:String}}

模板中 console.log(props)

控制台中输出：