vue3路由传参如何传递数组对象

在Vue3中，路由传参需要将数组对象转换成字符串，然后在接收参数的页面再将其转换成对象。具体步骤如下：

1. 在路由跳转时，使用JSON.stringify()方法将数组对象转换成字符串，并将其作为参数传递。

import { useRouter } from 'vue-router'

const router = useRouter()

const toDetail = () => {
  const list = [{ name: 'Tom', age: 18 }, { name: 'Jerry', age: 20 }]
  router.push({
    name: 'detail',
    params: {
      list: JSON.stringify(list)
    }
  })
}

2. 在接收参数的页面，使用JSON.parse()方法将字符串转换成数组对象。

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const list = JSON.parse(route.params.list)
    console.log(list) // 输出：[{ name: 'Tom', age: 18 }, { name: 'Jerry', age: 20 }]
  }
}

相关问题

vue3路由传参如何传递数组

可以使用路由的query参数来传递数组。在路由跳转时，将数组作为参数传递给query，然后在接收方的组件中通过$route.query来获取传递的数组参数。以下是一个示例代码：

1.在路由跳转时传递数组参数：

this.$router.push({
  path: '/example',
  query: {
    arr: [1, 2, 3]
  }
})

2.在接收方的组件中获取传递的数组参数：

export default {
  mounted() {
    const arr = this.$route.query.arr
    console.log(arr) // 输出 [1, 2, 3]
  }
}

使用Vue实现以下功能： •设计一组原始数据，如商品集合（用JSON数组） •与表格绑定，显示内容。并用Vue路由传参

好的，我可以帮你回答这个问题。首先，我们需要准备一个包含商品信息的 JSON 数组，可以像下面这样定义：

[
  {
    "id": 1,
    "name": "商品A",
    "price": 100
  },
  {
    "id": 2,
    "name": "商品B",
    "price": 200
  },
  {
    "id": 3,
    "name": "商品C",
    "price": 300
  }
]

接下来，我们需要在 Vue 中定义一个数据对象，将上面的 JSON 数组作为数据源，可以像下面这样定义：

data() {
  return {
    products: [
      {
        "id": 1,
        "name": "商品A",
        "price": 100
      },
      {
        "id": 2,
        "name": "商品B",
        "price": 200
      },
      {
        "id": 3,
        "name": "商品C",
        "price": 300
      }
    ]
  }
}

然后，在页面中使用表格组件来展示商品信息，可以像下面这样定义：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

最后，我们需要在 Vue 路由中定义一个参数，用于传递商品 ID，可以像下面这样定义：

const router = new VueRouter({
  routes: [
    {
      path: '/product/:id',
      component: ProductDetail
    }
  ]
})

在商品列表中，我们可以为每个商品的名称添加一个链接，链接的路径为 `/product/:id`，其中 `:id` 为商品的 ID。当用户点击链接时，会跳转到 `ProductDetail` 组件，同时传递商品的 ID 作为参数。在 `ProductDetail` 组件中，可以通过 `this.$route.params.id` 获取到商品的 ID。