vue路由传参方式

Vue路由传参方式主要有以下几种：

1. 路由路径传参：可以通过在路由路径中添加参数来传递数据，例如：

```

// 定义路由

const router = new VueRouter({

routes: [

{

path: '/user/:id'

name: 'user'

component: User

props: true

}

]

})

```

在上述例子中，`path` 中的 `:id` 表示参数，实际访问路径可以是 `/user/1`，其中的 `1` 作为参数传递给 `User` 组件。

2. 查询参数传参：可以通过在路由地址后面添加 `?` 和参数名的方式传递参数，例如：

```

// 定义路由

const router = new VueRouter({

routes: [

{

path: '/user'

name: 'user'

component: User

props: true

}

]

})

```

在上述例子中，实际访问路径可以是 `/user?id=1`，其中的 `id` 就是参数名，`1` 是参数值。

3. 路由配置传参：可以通过路由配置的 `props` 属性传递参数，例如：

```

// 定义路由

const router = new VueRouter({

routes: [

{

path: '/user'

name: 'user'

component: User

props: { id: '1' }

}

]

})

```

在上述例子中，`props` 属性通过对象的形式传递参数，其中的 `id` 就是参数名，`1` 是参数值。

4. 编程式传参：可以通过编程的方式传递参数，例如在组件内部使用 `router.push` 方法：

```

// 在组件中传递参数

this.$router.push({ name: 'user'

params: { id: '1' }})

```

在上述例子中，通过 `params` 属性传递参数，其中的 `id` 就是参数名，`1` 是参数值。

综上所述，Vue路由传参方式有路由路径传参、查询参数传参、路由配置传参和编程式传参等多种方式，开发者可以根据实际需求选择合适的方式进行传参。