Vue路由传参的几种方式

Vue路由传参的几种方式

Vue 是一个构建用户界面的渐进式框架，它可以非常灵活地根据需要进行组件化开发，同时还具有完善的路由功能。在实际开发中，我们常常需要通过路由传递参数来实现页面之间的数据交互。接下来，我们将简要介绍 Vue 路由传参的几种方式。

# 1. 查询参数

查询参数是一种最为常见的参数传递方式，它可以将参数附加在路由路径的末尾，以“？”开头，多个参数之间用“&”隔开。我们可以通过 $route.query 对象来访问传递的参数。

``` js
// 跳转页面
this.$router.push({ path: '/user', query: { id: '123', name: 'John' } })

// 接收参数
console.log(this.$route.query.id) // '123'
console.log(this.$route.query.name) // 'John'
```

查询参数的优点是传递简单，不需要定义路由，但是它只适用于一些简单、不敏感的参数，比如搜索关键字、分页等信息。

# 2. 路由参数

路由参数是指将参数直接附加在路由路径中作为路径的一部分，比如 /user/:id 。我们可以在路由配置中使用“:”来定义参数，通过 $route.params 对象来访问传递的参数。

``` js
// 路由配置
{ path: '/user/:id', component: User }

// 跳转页面
this.$router.push('/user/123')

// 接收参数
console.log(this.$route.params.id) // '123'
```

路由参数的优点是可以定义路由，非常适用于一些需要保护的敏感信息，但是缺点是无法添加默认值，如果该参数不存在则会显示错误。

# 3. props传参

props 是传递到组件中的参数，我们可以在路由配置中将 props 属性设置为 true ，以访问 $route.params 对象，同时将参数传递到组件中。

``` js
// 路由配置
{ path: '/user/:id', component: User, props: true }

// 组件中
export default {
props: ['id'],
...
}

// 跳转页面
this.$router.push({ path: '/user/123', props: { id: '123' } })

// 接收参数
console.log(this.id) // '123'
```

props 传参的优点是可以在组件内直接使用参数，便于组件复用，但是缺点是需要在路由和组件之间进行显式的传递。

# 4. 动态路由

动态路由是指将参数动态地附加在路由路径中，比如 /user/123 ，其中 123 是动态变化的。我们可以在路由配置中使用“:”来定义动态路由，通过 $route.params 对象来访问传递的参数。

``` js
// 路由配置
{ path: '/user/:id', component: User }

// 跳转页面
this.$router.push({ path: '/user/' + id })

// 接收参数
console.log(this.$route.params.id) // '123'
```

动态路由的优点是可以在路由和组件之间很方便地传递参数，但是缺点是同样无法添加默认值，在处理参数方面需要谨慎。

综上，Vue 提供了多种方式来处理路由参数的传递，根据实际需求选择合适的方式可以让我们的代码更优雅、更高效。