Vue3：路由组件的props用法

一、情景说明

路由组件间，传递参数时，更优雅的写法
Vue3的写法和Vue2的写法基本相似，就是接收参数的组件，略有不同
Vue2的写法：https://blog.csdn.net/Brave_heart4pzj/article/details/136283870

二、案例

1、传参时的路由配置

1、布尔值写法

将路由收到的所有params参数作为props传给路由组件，此种配置，无法处理query传参

const router = createRouter({history:createWebHistory(), //路由器的工作模式（稍后讲解）routes:[ //一个一个的路由规则{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail/:id/:title/:content?',component:Detail,props:true}]},{name:'guanyu',path:'/about',component:About}]
})

2、函数式写法（功能最强大）

const router = createRouter({history:createWebHistory(), //路由器的工作模式（稍后讲解）routes:[ //一个一个的路由规则{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail,props(route){return route.query}}]},{name:'guanyu',path:'/about',component:About}]
})

2、接收参数的组件配置

<template><ul class="news-list"><li>编号：{{id}}</li><li>标题：{{title}}</li><li>内容：{{content}}</li></ul>
</template>
<script setup lang="ts" name="About">defineProps(['id','title','content'])
</script>