VUE框架：vue2转vue3全面细节总结（3）路由组件传参

 

目录

路由组件传参

布尔模式

命名视图

对象模式

---

路由组件传参

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