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

初學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;
相關文章
相關標籤/搜索