vue 配置路由参数和动态值

在 Vue 中配置路由参数和动态值可以通过路由的 path 属性和 component 属性来实现。

首先，path 属性可以设置路由的路径，如果需要传递参数可以在路径中使用冒号(:)来表示参数。例如：

{
  path: '/user/:id',
  component: User
}

这个路由的路径为 `/user/:id`，其中 id 是一个动态的参数。在 User 组件中可以通过 `$route.params.id` 来获取这个参数的值。

如果需要在路由中传递多个参数，可以在 path 属性中使用多个冒号来表示。例如：

{
  path: '/user/:id/:name',
  component: User
}

这个路由的路径为 `/user/:id/:name`，其中 id 和 name 都是动态的参数。在 User 组件中可以通过 `$route.params.id` 和 `$route.params.name` 来获取这两个参数的值。

除了 path 属性，还可以在路由中使用 props 属性来传递参数。例如：

{
  path: '/user',
  component: User,
  props: {
    id: 1,
    name: 'Tom'
  }
}

这个路由的路径为 `/user`，在 User 组件中可以通过 props 来获取传递的参数，例如：

export default {
  props: ['id', 'name'],
  // ...
}

在使用这种方式传递参数时，需要在组件中声明 props，并且这些 props 会被自动注入到组件实例中。

总结一下，Vue 中配置路由参数和动态值的方式有以下几种：

1. 在 path 属性中使用冒号来表示动态参数；
2. 在 props 属性中传递参数；
3. 在组件中通过 `$route.params` 来获取动态参数的值。