vue 路由傳參 params 與 query

2021-08-26 12:23:16 字數 721 閱讀 5868

router檔案下index.js裡面,是這麼定義路由的:

我想用params來傳參,是這麼寫的,嗯~

this.$router.push(

});

結果可想而知,接收引數的時候:

this.$route.params.code     //undefined
這是因為,params只能用name來引入路由,下面是正確的寫法:

this.$router.push(

});

這回就對了,可以直接拿到傳遞過來的引數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 路由傳參query與params

註明 vue中 router 和 route 的區別 router 是路由操作物件,只寫物件 route 路由資訊物件,唯讀物件 操作 路由跳轉 this router.push 讀取 路由引數接收 this.name this route.params.name this.age this.rou...

vue 路由傳參 params與query的區別

假設是從列表頁帶著引數id進入詳情頁,有兩種傳參方式 params與query 列表頁 list.vue todetail id 詳情頁 detail.vue created 列表頁 list.vue todetail id 詳情頁 detail.vue created 1.引入路由 params要...

vue路由傳參 params和query

query傳參 路由 routes 傳參 通過path引入 this router.push 通過name引入 this router.push 接收 com和hhhhome元件中 console.log this route.query params傳參 只能用name引入,不能用path 路由 ...