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路由传参传递对象

在Vue中，路由传参不能直接传递一个对象，需要先将对象转换成字符串，然后在接收的页面再将字符串转换回对象。在Vue3中，可以使用`useRoute`方法来接收路由参数，示例代码如下：

import { useRoute } from "vue-router";

setup() {
  const route = useRoute();
  const data = JSON.parse(route.params.list);
}

而在Vue2中，可以通过`this.$route.params`来接收路由参数，示例代码如下：

let data = this.$route.params.list;
data = JSON.parse(data);

需要注意的是，在传递参数的时候，需要使用`JSON.stringify()`方法将对象转换成字符串，在接收参数的时候使用`JSON.parse()`方法将字符串转换成对象。这样就可以成功传递和接收包含对象的参数了。引用<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue路由传参接收以及传参对象为对象时的解决方案](https://blog.csdn.net/qq_41131745/article/details/122595114)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [Vue路由传参的方法和传递参数为对象时的问题](https://blog.csdn.net/djwhwj/article/details/127084673)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]