router.push() 传递对象
可以通过将对象转换为字符串,再通过路由传递参数的方式来传递对象。具体步骤如下:
1.使用JSON.stringify()方法将对象转换为字符串。
2.在使用router.push()方法时,将转换后的字符串作为参数传递。
3.在接收参数的组件中,使用JSON.parse()方法将字符串转换为对象。
示例代码如下:
// 路由跳转
let obj = { name: 'Tom', age: 18 }
let parObj = JSON.stringify(obj)
this.$router.push({ path: '/detail', query: { obj: parObj } })
// 详情页获取参数
let parObj = this.$route.query.obj
let obj = JSON.parse(parObj)
console.log(obj.name) // 输出:Tom
需要注意的是,这种方式虽然可以传递对象,但是如果数据较多的话,地址栏会很长,不太推荐使用。另外,如果传递的是对象或数组,在地址栏中会被强制转换成[object Object],刷新后也无法获取到对象值。因此,建议使用props配合组件路由解耦来传递对象或数组。
router.push传递对象参数
在Vue.js中,router.push
方法用于导航到一个新的路由,当你需要传递对象作为参数时,可以将该对象转换为字符串,然后在URL中编码,再传递给push
。这是因为浏览器的URL有长度限制,并且直接传递复杂的数据结构可能会导致URL变得过长或无法解析。
例如,假设你有一个对象:
const data = { id: 1, name: 'John' };
你可以将其序列化为JSON字符串:
const jsonString = JSON.stringify(data);
然后在router.push
中这样使用:
this.$router.push({ path: '/detail', query: { obj: jsonString } });
在目标路由接收参数的地方,你需要解码这个字符串:
export default {
async created() {
const decodedData = JSON.parse(this.$route.query.obj);
// 现在你可以访问解码后的数据
console.log(decodedData.id); // 输出1
}
}
this.$router.push传递对象
在Vue.js中,可以使用this.$router.push()方法来进行路由跳转,并且可以通过不同的方式传递参数。如果你想通过将参数直接添加到URL路径中进行传递,可以使用通过path传参的方式。例如,你可以在路由配置中设置一个参数占位符,然后在跳转时将参数值作为参数传递给$router.push()方法。具体地,在路由配置中设置path为'/pushAdd/:id',然后在跳转时使用this.$router.push({ path: /pushAdd/${id}
})来传递对象。
另外,还可以使用通过query传参的方式来传递对象。通过query传参,参数将被添加到URL的查询字符串中。这可以通过在$router.push()方法中使用query属性来实现。例如,你可以使用this.$router.push({ path: '/pushAdd', query: { id: yourId, data: yourData } })来传递对象。然后,可以通过this.$route.query来获取传递的参数值。例如,可以使用this.$route.query.id来获取id参数的值,使用this.$route.query.data来获取data参数的值。123
引用[.reference_title]
- 1 2 3 vue路由$router.push()的三种传参方式[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
allinsert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]