目录
路由组件传参
当我们获取路由参数时，通常在模板中使用 $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 组件。