this.$router.push用query传参对象时需注意的地方

在vue项目中，我们用函数式编程this.$router.push跳转，用query传递一个对象时要把这个对象先转化为字符串，然后在接收的时候要转化为对象，要不然会接收不到参数。要不就把参数分开传递，不要放到对象里。

this.$router.push({path: '/liveing',query: {routeParams: JSON.stringify({ liveUrl: url, flag: 2 })}
});

接收：

let routeParams = JSON.parse(this.$route.query.routeParams)
this.currMeetingUrl = routeParams.liveUrl;
this.obcject = routeParams.flag;

第二种方法：不要套在对象里直接传递

this.$router.push({path: '/liveing',query: {liveUrl: url, flag: 2}
});

接收：

let liveUrl = this.$route.query.liveUrl;
let flag = this.$route.query.flag;

this.$router.push用query传参对象时需注意的地方相关推荐

vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
vue 中的动态传参和query传参
Vue router 如何传参 params.query 是什么? params:/router1/:id,这里的 id 叫做 params.例如/router1/123, /router1/789 ...
@query传参_前端框架vue中query和params传参
注意(用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string)) 也可以选用sessionstorage/loc ...
@query传参_VueRouter之query与params两种传参区别
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,比如传个id获取个详情信息,今天咱们就来看看Vue中是怎么实现这种传递参数得在Vue中提供了两种方法来进行路由传参:query 和 ...
vue使用query传参页面刷新数据丢失问题
今天开发的时候用query直接传了一个对象,在跳转之后的页面在对这个对象做解析,这样做其实蛮方便的,可惜的是页面不能刷新,虽然刷新后面页面的url还在,但是页面的object解析出错了. 寻其原因第 ...
@query传参_vue-router中params传参和query传参的区别及处理方法
在 Vue 实例内部,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 his ...
params/query传参
一.路由传参 params参数:属于路由中的一部分,在配置路由的时候,必须占位 query参数:不属于路由当中的一部分,类似于ajax中的queryString(/home?a=1&b=2) ...
Vue之路由的query传参加密解密
首先,创建一个base64.js const Base64 = {//加密encode(str) {return btoa(encodeURIComponent(str).replace(/%([0- ...
post请求后端body和query传参的区别
错误: Required request parameter 'username' for method parameter type String is not present 原因: 后端规定的请 ...

this.$router.push用query传参对象时需注意的地方

this.$router.push用query传参对象时需注意的地方相关推荐

最新文章

热门文章