龙空技术网

vue-router中params传参和query传参的区别及处理方法

从小励志当全栈 726

前言:

而今朋友们对“ajaxqueryparams格式”大约比较关切,看官们都需要了解一些“ajaxqueryparams格式”的相关知识。那么小编也在网上搜集了一些有关“ajaxqueryparams格式””的相关文章,希望小伙伴们能喜欢,小伙伴们一起来学习一下吧!

在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

这里我们主要采用对象跳转形式。

要跳转页面的path属性值:router.push({ path: 'my-exchange' }),对应router数组对象中的path属性值:

要跳转页面的name属性值:router.push({ name: 'my-exchange-index' }),对应router数组对象中的name属性值:

给页面传参则在push函数传入的实参对象中的第二个属性传入 query 或 params对象即可,对象中写具体要传的参数(注:如果query 或 params对象中的属性传入的有引用类型的,则需要JSON.stringify(引用类型)转化一下)。

在对应的页面接收也只需要:this.$route.query 或 this.$route.params:

官方解释:

其中我个人建议对象的第一个属性用name来控制要跳转的页面,因为如果是path的话,params属性将会被忽略(也就是说传参要采用拼接字符串的方式,超不利于代码越多,看的还不舒服)。

同时对于第二个属性,我个人建议采用query来进行路由传参,因为 params 对象传参,只要页面一刷新你传入的参数就没了,query则保存在url地址中,你怎么刷新它都还在。

小总结一下:

使用params传参在浏览器的url地址栏中是不可见得,query则类似于get传参,是可见的。

params传参会丢失数据,query不会。

不过虽然params传参会丢失数据,但是它不会污染 url 路径,会显得 url 路径特别的整洁干净。

所以偶尔也会使用params传参。

当然啦,也有很多方法可以处理params传参会丢失数据问题,比如通过Cookies来存储数据即可。

在页面进入就执行的生命周期函数中看一下 this.$route.params 中有没有东西,如果有,则把它存到 Cookies 里面,如果页面刷新了,数据没了,则直接从Cookies 里面拿即可。

标签: #ajaxqueryparams格式