java传参字符串数组_vue-router中params传参和query传参的
区别及处理⽅法
在 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数组对象中的na
me属性值:
params对象中的属性传⼊的有引⽤类型的,则需要JSON.stringify(引⽤类型)转化⼀下)。
在对应的页⾯接收也只需要:this.$route.query 或 this.$route.params:
官⽅解释:
其中我个⼈建议对象的第⼀个属性⽤name来控制要跳转的页⾯,因为如果是path的话,params属性将会被忽略(也就是说传参要采⽤拼接字符串的⽅式,超不利于代码越多,看的还不舒服)。
同时对于第⼆个属性,我个⼈建议采⽤query来进⾏路由传参,因为 params 对象传参,只要页⾯⼀刷新你传⼊的参数就没了,query则保存在url地址中,你怎么刷新它都还在。
⼩总结⼀下:
使⽤params传参在浏览器的url地址栏中是不可见得,query则类似于get传参,是可见的。
params传参会丢失数据,query不会。
vuejson转对象不过虽然params传参会丢失数据,但是它不会污染 url 路径,会显得 url 路径特别的整洁⼲净。
所以偶尔也会使⽤params传参。
当然啦,也有很多⽅法可以处理params传参会丢失数据问题,⽐如通过Cookies来存储数据即可。
在页⾯进⼊就执⾏的⽣命周期函数中看⼀下 this.$route.params 中有没有东西,如果有,则把它存到 Cookies ⾥⾯,如果页⾯刷新了,数据没了,则直接从Cookies ⾥⾯拿即可。