大家好，我是csdn的博主：lqj_本人
这是我的个人博客主页：
lqj_本人_python人工智能视觉（opencv）从入门到实战,前端,微信小程序-CSDN博客
最新的uniapp毕业设计专栏也放在下方了：
https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482
平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西，
哔哩哔哩欢迎关注：
卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频
目录
路由组件传参
布尔模式
命名视图
对象模式
路由组件传参
当我们获取路由参数时，通常在模板中使用 $route ，在逻辑中调用 useRoute() 方法，如：
<template><div>User {{ $route.params.id }}</div>
</template><script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>
以上方法比较麻烦，而且与路由紧密耦合，不利于组件封装。我们可以在创建路由时通过 props 配置来解除这种行为：
const routes = [{path: '/user/:id',name: 'user',component: User,props: true}
]
此时 route.params 将直接被设置为组件的 props，这样组件就和路由参数解耦了：
<template><div>User {{ id }}</div>
</template><script setup lang="ts">
const props = defineProps<{id: string
}>()
console.log(props.id)
</script>
布尔模式
当 props 设置为 true 时，route.params 将被设置为组件的 props。
命名视图
对于有命名视图的路由，你必须为每个命名视图定义 props 配置：
const routes = [{path: '/user/:id',components: { default: User, sidebar: Sidebar },props: { default: true, sidebar: false }}
]
对象模式
当 props 是一个对象时，它会将此对象设置为组件 props 。当 props 是静态的时候很有用。
const routes = [{path: '/user',component: User,props: { newsletterPopup: false }}
]
函数模式
我们也可以创建一个返回 props 的函数。这允许你将参数转换为其他类型：
const routes = [{path: '/user',component: User,props: route => ({ id: route.query.userId })}
]
如 /user?userId=123 参数会被转为 { id: '123' } 作为 props 传给 User 组件。
