在 Vue 中使用路由实现页面跳转是非常常见的需求。除了常规的页面跳转外，我们有时候还需要将参数传递给下一个路由。在 Vue3 的路由模块中，我们可以通过路由配置参数 props 来实现这个功能。

什么是路由配置参数 props？

在 Vue3 的路由中，通过配置路由对象的 props 属性，我们可以将组件和路由参数进行关联。这样，在跳转到该路由时，参数会被传递给对应的组件，从而可以在组件中使用这些参数。

如何配置路由参数 props？

在路由配置中，我们可以通过两种方式设置 props。

静态 props

通过设置 props 属性为一个字面量对象，我们可以将静态的参数传递给组件。例如：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    props: { name: 'Tom', age: 20 }
  }
]

这样，在跳转到 /user/:id 路由时，User 组件将会接收到一个 props 对象，其中包含了 name 和 age 属性。

动态 props

我们也可以通过设置 props 为 true 或为一个返回 props 对象的函数来实现动态的 props。

当设置 props 为 true 时，将会把路由参数作为 props 传递给组件。例如：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    props: true
  }
]

在跳转到 /user/:id 路由时，User 组件将会接收到一个 props 对象，其中包含了一个名为 id 的属性，值为路由路径中的参数值。

如果我们需要根据参数自定义传递的 props 内容，我们可以将 props 设置为一个返回 props 对象的函数。例如：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
    props: (route) => ({ id: route.params.id, isAdmin: true })
  }
]

在跳转到 /user/:id 路由时，User 组件将会接收到一个 props 对象，其中包含了一个名为 id 的属性，值为路由路径中的参数值，以及一个名为 isAdmin 的属性，值为 true。

如何在组件中使用 props？

在接收到 props 对象后，我们可以在组件中像使用普通的属性一样使用这些 props。

<template>
  <div>
    <h1>{{ name }}</h1>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      required: true
    }
  }
}
</script>

在上述代码中，我们定义了 User 组件接收的 props 对象的属性 name 和 age。在模板中，我们可以直接使用这两个属性。

总结

通过路由配置参数 props，我们可以将参数传递给组件，并在组件内部进行使用。无论是静态的 props 还是动态的 props，都为我们提供了更灵活和可定制的路由参数传递方式。

希望本文对你理解 Vue3 路由配置参数 props 有所帮助！

本文来自极简博客，作者：人工智能梦工厂，转载请注明原文链接：Vue3-34 路由 – 路由配置参数 props