遇到问题是query传对象参数后,刷新新页面,数据变化为"[object Object]"
先来回顾一下vue路由传参方式
第1种方法。使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=? 页面刷新数据不会丢失
this.$router.push({
name: 'more',
query: {
value: ‘
在另一页this.$route.qurey.value取值
第2种方法。使用path来匹配路由,然后通过params来传递参数
但是页面刷新数据会丢失!!!
this.$router.push({
name: 'more',
params: {
value: this.value
在另一页this.$route.params.value取值
如果想用第二种方法传,而且还要刷新数据不丢失,
那么第3种方法需要在路由里配置
需要在path中添加/:id来对应 $router.push 中path携带的参数
path: '/more/:value',
name: 'more',
meta: {
title: '查看更多'
component: () => import('@/views/pages/more')
刷新后数据不会丢失 但是发现url上又显示出传参了🤪
这时可以用到vuex
回到问题,这几种都是参数不多的情况,那么我要传个对象呢,可以看到第一次能拿到值
但是刷新后
数据变化为"[object Object]"
so 传参前先转为字符串
JSON.stringify(data)
JSON.parse(data)
复制代码