vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由傳參 params 與 query兩種方式的區(qū)別
初學(xué)vue的時(shí)候，不知道如何在方法中跳轉(zhuǎn)界面并傳參，百度過(guò)后，了解到兩種方式，params 與 query。然后，錯(cuò)誤就這么來(lái)了：
?router文件下index.js里面，是這么定義路由的：
{path:"/detail",name:"detail",component:home}
我想用params來(lái)傳參，是這么寫的，嗯~
this.$router.push({
?path:"/detail",
?params:{
?name:'nameValue',
?code:10011
?}
});
結(jié)果可想而知，接收參數(shù)的時(shí)候：
this.$route.params.code //undefined這是因?yàn)?#xff0c;params只能用name來(lái)引入路由，下面是正確的寫法：
this.$router.push({name:"detail",params:{name:'nameValue',code:10011} });這回就對(duì)了，可以直接拿到傳遞過(guò)來(lái)的參數(shù)nameValue了。
說(shuō)完了我的犯傻，下面整理一下這兩者的差別：
1、用法上的
剛才已經(jīng)說(shuō)了，query要用path來(lái)引入，params要用name來(lái)引入，接收參數(shù)都是類似的，分別是this.$route.query.name和this.$route.params.name。
注意接收參數(shù)的時(shí)候，已經(jīng)是$route而不是$router了哦！！
2、展示上的
query更加類似于我們ajax中g(shù)et傳參，params則類似于post，說(shuō)的再簡(jiǎn)單一點(diǎn)，前者在瀏覽器地址欄中顯示參數(shù)，后者則不顯示
query: ? ? ? ?
params: ? ?
?
總結(jié)：剛學(xué)vue的時(shí)候，由于沒(méi)有認(rèn)真細(xì)致的看文檔，導(dǎo)致在很多細(xì)小的坑里爬不上來(lái)，后來(lái)自己慢慢的走上正軌的時(shí)候，再去看文檔，看到了很多原本可以避免的坑，想插死自己的心都有了！！
加油爬坑，共勉！
轉(zhuǎn)載于:https://www.cnblogs.com/jiangze-blog/p/9150574.html
總結(jié)
以上是生活随笔為你收集整理的vue 路由传参 params 与 query两种方式的区别（转载）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
