前端路由传参可以用query传this.list.id吗

可以通过 `query` 传递 `this.list.id`，但是需要注意的是，`query` 参数会被编码为字符串，因此在传递对象或数组等复杂数据时，需要将其序列化成字符串再进行传递。

下面是一个使用 `query` 传递 `this.list.id` 的例子：

1. 在组件中，可以通过 `$route.query` 获取 `query` 参数：

<template>
  <div>
    <h1>User {{ $route.query.id }}</h1>
  </div>
</template>

2. 当使用 `router-link` 组件时，可以通过 `to` 属性传递路由参数：

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

需要注意的是，如果将复杂数据直接传递给 `query` 参数，可能会导致字符串过长，造成性能问题。如果需要传递复杂数据，可以考虑使用状态管理工具（如 Vuex）来管理数据。

相关问题

前端路由传参可以用query传data中的数据吗

在 Vue2 中，可以使用 `query` 传递数据，但是并不建议直接将 `data` 中的数据通过 `query` 传递。因为 `query` 参数会被编码为字符串，如果传递的数据比较复杂，可能会导致字符串过长，造成性能问题。

通常情况下，使用 `params` 传递数据更为合适。如果需要传递复杂数据，可以考虑使用状态管理工具（如 Vuex）来管理数据。

下面是一个使用 `params` 传递数据的例子：

1. 在定义路由时，可以配置路由路径和组件：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})

2. 在组件中，可以通过 `$route.params` 获取 `params` 参数：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

3. 也可以在 JS 中通过 `$route.params` 获取路由参数：

export default {
  created () {
    console.log(this.$route.params.id)
  }
}

4. 当使用 `router-link` 组件时，可以通过 `to` 属性传递路由参数：

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

在实际开发中，如果需要传递复杂数据，可以考虑使用状态管理工具（如 Vuex）来管理数据。

this.$router.push给子路由传参

可以通过在 `this.$router.push` 方法中传递一个包含参数的对象来给子路由传参。例如：

// 假设有一个名为 'child' 的子路由，并且该子路由需要一个名为 'id' 的参数

this.$router.push({
  name: 'child',
  params: {
    id: 123
  }
})

在子路由中，可以通过 `$route.params.id` 来访问该参数。例如：

// 假设在 'child' 路由组件中访问 'id' 参数

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出：123
  }
}

需要注意的是，如果你的子路由是通过 `path` 或者 `query` 参数来匹配的，则需要稍微不同的方式传参。例如，如果你的子路由通过 `path` 参数来匹配，可以这样传递参数：

// 假设你的子路由路径为 '/child/:id'

this.$router.push(`/child/${id}`)

在子路由中，可以通过 `$route.params.id` 来访问该参数。```