vue3 routr-link query传参两种方式

当使用 `vue-router` 中的 `<router-link>` 组件时，可以通过 `query` 属性将参数传递给目标路由。

第一种方式是直接在 `to` 属性中添加一个对象，例如：

<router-link :to="{ path: '/foo', query: { id: '123' } }">Go to Foo</router-link>

这样就会将 `{ id: '123' }` 这个对象作为查询参数传递给目标路由。

第二种方式是使用 `v-bind` 指令将一个包含参数的变量绑定到 `to` 属性上，例如：

<router-link :to="{ path: '/foo', query: queryParams }">Go to Foo</router-link>

这里的 `queryParams` 可以是一个包含参数的对象，也可以是一个计算属性或者方法返回的对象。

相关问题

vue-admin 路由传参

在Vue.js中，使用vue-router进行路由传参可以通过以下几种方式实现。

1. 通过路由参数传递：可以在定义路由时，使用动态路由来传递参数。例如：

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

然后在组件中，通过props属性来使用传递的参数：

props: ['id']

2. 通过query传递参数：可以使用to属性或者router-link组件来传递query参数。例如：

<router-link :to="{ path: '/user', query: { id: 1 }}">
  User
</router-link>

然后在组件中，可以通过this.$route.query来获取传递的参数：

this.$route.query.id

3. 使用命名路由传递参数：可以给路由定义一个name，在使用router-link时传递参数。例如：

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

然后在组件中，使用name属性和params属性来传递参数：

<router-link :to="{ name: 'user', params: { id: 1 }}">
  User
</router-link>

然后在组件中，可以通过this.$route.params来获取传递的参数：

this.$route.params.id

通过以上几种方式，可以在vue-admin中实现路由传参，根据具体的业务需求选择合适的方式进行传参。