vue的组件中怎么接收router传来的参数

在 Vue 中，可以通过 `$route` 对象来获取路由传递的参数。以下是一个简单的模板，展示了如何在组件中获取路由传递的参数：

// 在路由定义中定义参数
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      component: UserComponent
    }
  ]
})

// 在组件中获取参数
const UserComponent = {
  computed: {
    userId() {
      return this.$route.params.userId
    }
  },
  template: '<div>User ID: {{ userId }}</div>'
}

在上面的示例中，我们定义了一个路由 `/user/:userId`，其中 `:userId` 表示路由参数。在组件中，我们使用 `$route.params.userId` 来获取路由参数。当用户访问 `/user/123` 时，组件中将显示 `User ID: 123`。

需要注意的是，如果我们在同一个组件中切换不同的路由，组件将不会重新挂载，因此我们需要使用 `watch` 或 `beforeRouteUpdate` 来检测路由参数的变化。

除了使用 `$route.params` 获取路由参数外，还可以使用 `$route.query` 获取查询参数，例如：

// 在路由定义中定义查询参数
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: UserComponent
    }
  ]
})

// 在组件中获取查询参数
const UserComponent = {
  computed: {
    foo() {
      return this.$route.query.foo
    }
  },
  template: '<div>Foo: {{ foo }}</div>'
}

在上面的示例中，我们定义了一个路由 `/user`，并使用查询参数 `foo`。在组件中，我们使用 `$route.query.foo` 来获取查询参数的值。当用户访问 `/user?foo=bar` 时，组件中将显示 `Foo: bar`。