初學vue的時候,不知道如何在方法中跳轉界面並傳參,百度事後,瞭解到兩種方式,params 與 query。而後,錯誤就這麼來了:html
router文件下index.js裏面,是這麼定義路由的:vue
{ path:"/detail", name:"detail", component:home }
我想用params來傳參,是這麼寫的,嗯~ajax
this.$router.push({ path:"/detail", params:{ name:'nameValue', code:10011 } });
結果可想而知,接收參數的時候:瀏覽器
this.$route.params.code //undefined
這是由於,params只能用name來引入路由,下面是正確的寫法:post
this.$router.push({ name:"detail", //params對應的是name,而且name不能加"/" params:{ name:'nameValue', code:10011 } });
這回就對了,能夠直接拿到傳遞過來的參數nameValue了。this
說完了個人犯傻,下面整理一下這二者的差異:code
一、用法上的component
剛纔已經說了,query要用path來引入,params要用name來引入,接收參數都是相似的,分別是this.$route.query.name和this.$route.params.name。router
注意接收參數的時候,已是$route而不是$router了哦!!htm
二、展現上的
query更加相似於咱們ajax中get傳參,params則相似於post,說的再簡單一點,前者在瀏覽器地址欄中顯示參數,後者則不顯示
總結:剛學vue的時候,因爲沒有認真細緻的看文檔,致使在不少細小的坑裏爬不上來,後來本身慢慢的走上正軌的時候,再去看文檔,看到了不少本來能夠避免的坑,想插死本身的心都有了!!
加油爬坑,共勉!
另外再多少一點,日常可能會習慣的在router-link上直接傳參數:
<router-link :to="{path:'libraryDetail/', query:{library_id:data.library_id}}">
那麼對應的獲取方法:
library_id = this.$route.query.library_id;