在路由中传递 Props

Props 是 Vue 用来将数据从父组件传递到子组件的方式，但是有时候我们也需要在路由中传递 Props ，这个时候该怎么做呢？

方式一：props 属性

我们可以在路由定义时，通过 props 属性来传递路由 Props。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true // 将路由参数作为组件属性传递给 User 组件
    }
  ]
})

在上面的例子中，我们通过 /:id 定义了一个路由参数，通过 props: true 将路由参数传递给了 User 组件。

在 User 组件中，我们可以通过 props 来声明需要接收哪些 Props，并用 this.xx 来访问这些 Props。

const User = {
  props: ['id'], // 声明需要接收 id Prop
  template: '<div>User {{ id }}</div>',
  mounted() {
    console.log('userId:', this.id)
  }
}

方式二：函数模式

如果我们有一些计算逻辑需要在路由中处理，我们可以使用函数模式来传递 Props。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: (route) => ({
         id: parseInt(route.params.id)
      })
    }
  ]
})

在上面的例子中，我们通过 /:id 定义了一个路由参数，通过 props: (route) => ({ id: parseInt(route.params.id) }) 来处理参数，并将处理后的结果传递给了 User 组件。

在 User 组件中，我们可以通过 props 来声明需要接收哪些 Props，并用 this.xx 来访问这些 Props。

const User = {
  props: ['id'], // 声明需要接收 id Prop
  template: '<div>User {{ id }}</div>',
  mounted() {
    console.log('userId:', this.id)
  }
}

总结

以上就是在路由中传递 Props 的两种方式，分别是 props 属性和函数模式。前者用于简单传递 Props，后者适用于需要进行额外处理的情况。在使用时，建议根据实际情况选择合适的方式。