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

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

在路由跳转时，使用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)
}
})
}
登录后复制

在接收参数的页面，使用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]
}
}
登录后复制

vue3router传参

创建带有参数的 Vue Router 路由
在 Vue 3 中创建带参数的路由涉及定义动态路径片段以及处理这些参数的方式。当设置路由器实例时，可以指定具有冒号前缀 (:) 的 URL 片段作为占位符来表示动态部分。
对于想要接收 ID 参数的一个简单例子来说，在 routes 数组里配置对象如下所示：
const routes = [
{
path: '/user/:id',
name: 'User',
component: UserComponent,
props: true // 这样组件可以通过props获取参数
}
];
登录后复制
为了使上述代码正常工作，还需要确保已安装并正确设置了 Vue Router 库[^2]。
一旦定义好了支持参数传递的路由规则之后，就可以通过多种方式访问传入的参数了。一种常见的做法是在目标页面组件内部利用 $route.params 属性读取它们；如果启用了 props:true 配置，则可以直接把匹配到的参数当作 prop 来使用。
下面是展示如何在一个名为 UserComponent.vue 的单文件组件中接受来自父级路由的 id 参数的例子：
<template>
<div class="user">
<h1>User Profile</h1>
<p>ID: {{ userId }}</p> <!-- 使用prop -->
<!-- 或者也可以这样写 -->
<!-- <p>ID: {{$route.params.id}}</p> -->
</div>
</template>

<script>
export default {
name: 'UserProfile',
props: ['userId'] // 接收从路由来的参数
};
</script>
登录后复制
此外，还可以借助编程式的导航方法向其他含有参数的目标地址跳转。这通常发生在点击按钮或其他交互事件触发的情况下。此时应当调用 router.push() 函数，并提供包含具体数值的对象形式的目的地描述。
例如，假设有一个按钮用于切换不同用户的资料视图，那么可以在绑定该按钮的行为处理器内编写这样的逻辑：
methods: {
goToAnotherUser(userId){
this.$router.push({ name: 'User', params: { id: userId }})
}
}
登录后复制
以上就是关于如何在 Vue 3 的路由系统中实现参数传递的一些指导说明[^1]。