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>