vue 路由傳參 params 與 query兩種方式的區別

　　初學vue的時候，不知道如何在方法中跳轉界面并傳參，百度過后，了解到兩種方式，params 與 query。然后，錯誤就這么來了：

　　?router文件下index.js里面，是這么定義路由的：

{path:"/detail",
name:"detail",component:home}

　　我想用params來傳參，是這么寫的，嗯~

this.$router.push({
?path:"/detail",
?params:{
?name:'nameValue',
?code:10011
?}
});

　　結果可想而知，接收參數的時候：

this.$route.params.code //undefined

　　這是因為，params只能用name來引入路由，下面是正確的寫法：

this.$router.push({name:"detail",params:{name:'nameValue',code:10011} });

這回就對了，可以直接拿到傳遞過來的參數nameValue了。

說完了我的犯傻，下面整理一下這兩者的差別：

1、用法上的

　　剛才已經說了，query要用path來引入，params要用name來引入，接收參數都是類似的，分別是this.$route.query.name和this.$route.params.name。

注意接收參數的時候，已經是$route而不是$router了哦！！

2、展示上的

　　query更加類似于我們ajax中get傳參，params則類似于post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，后者則不顯示

query: ? ? ? ?

params: ? ?

?

總結：剛學vue的時候，由于沒有認真細致的看文檔，導致在很多細小的坑里爬不上來，后來自己慢慢的走上正軌的時候，再去看文檔，看到了很多原本可以避免的坑，想插死自己的心都有了！！

加油爬坑，共勉！

轉載于:https://www.cnblogs.com/jiangze-blog/p/9150574.html

總結

以上是生活随笔為你收集整理的vue 路由传参 params 与 query两种方式的区别（转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。