Vue 路由傳參query與params

2022-03-07 09:05:57 字數 1143 閱讀 1591

註明:vue中 $router 和 $route 的區別 

//

$router : 是路由操作物件,只寫物件

//$route : 路由資訊物件,唯讀物件

//操作 路由跳轉

this

.$router.push(

})//

讀取 路由引數接收

this.name = this

.$route.params.name;

this.age = this.$route.params.age;

1、query傳參

query傳參位址使用path(路由位址)和name(路由名稱) 

//

傳參,使用path跳轉

this

.$router.push(

})

//路由

import login from '@/page/login'

//

接收id = this

.$route.query.id; name = this.$route.query.name;

//位址列表現形式 這種方式感覺安全性不好暴露了引數,但是對於對隱私要求不強的頁面可以這麼玩

2、params傳參

query傳參位址使用name(路由名稱)

//

傳參,使用name跳轉

this

.$router.push(

})//

路由import login from '@/page/login'

//接收

id = this.$route.params.id; name = this.$route.params.name;

//位址列表現形式1

http://localhost:8080/#/login/123456/yangj

//位址列表現形式2

原文:     

vue 路由傳參 params 與 query

router檔案下index.js裡面,是這麼定義路由的 我想用params來傳參,是這麼寫的,嗯 this.router.push 結果可想而知,接收引數的時候 this.route.params.code undefined這是因為,params只能用name來引入路由,下面是正確的寫法 thi...

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 路由 ...