一、路由传参

params参数：属于路由中的一部分，在配置路由的时候，必须占位

query参数：不属于路由当中的一部分，类似于ajax中的queryString(/home?a=1&b=2)

    //第一种：字符串形式this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase());//第二种：模板字符串this.$router.push(`/search/${this.keyword}?k=${ this.keyword.toUpperCase()}`);//第三种：对象this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})/*注意：使用对象形式配合params传参时，必须使用name属性，不能使用pathname 是配置路由时给 path 取的别名，方便使用$router : 是路由操作对象，只写对象$route : 路由信息对象，只读对象*/

params和query区别：

1.query可以通过name属性或者path属性来引入路由，而params只能通过name属性来引入路由；在使用params传递时如果指定了path属性而没有name属性，那么界面能成功跳转但是不能接受到传递过来的参数 2.query传递参数时会地址栏会发生改变，传递参数会携带在路径中，而params则不会 3.在刷新界面时，query传递的参数不会丢失，而params会丢失

二、路由传参相关题

1.如何指定params参数可传可不传

在配置路由的时候，在占位的后面加上一个？即可

export default {routes:[{path:'/search/:keyword?'}]
}

2.params参数可以传递也可以不传递，但如果传递的是空串，如何解决？

//使用undefined解决
this.$router.push({name:"search",params:{keyword:"" || undefined}, //当传递为空串时候，加个undefinedquery:{k:this.keyword.toUpperCase()}})

3.路由组件能不能传递props数据？

能

export default {routes:[{path:'/search/:keyword?'
//第一种：布尔值写法(只准传params参数，不准传query参数)props:true //第二种：对象写法props:{a:1,b:2}//第三种：函数写法(可以传params、query参数)props:($route) => {return {keyword:$route.params.keyword,k:$route.query.k}}//传递参数后同时也要在相关组件接收props:['变量名']}]
}

params/query传参相关推荐

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

params/query传参