Vue Router 的params和query傳參的使用和區別(詳盡)
阿新 • • 發佈:2019-01-22
首先簡單來說明一下$router
和$route
的區別
//$router : 是路由操作物件,只寫物件
//$route : 路由資訊物件,只讀物件
//操作 路由跳轉
this.$router.push({
name:'hello',
params:{
name:'word',
age:'11'
}
})
//讀取 路由引數接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;
1·query傳遞引數
我看了很多人都說query傳參要用path來引入,params傳參要用name來引入,只是我測試了一下,query使用name來引入也可以傳參,使用path也可以。如果有人知道原因可以告訴我一下,謝謝!
//query傳參,使用name跳轉
this.$router.push({
name:'second',
query: {
queryId:'20180822',
queryName: 'query'
}
})
//query傳參,使用path跳轉
this.$router.push({
path:'second',
query: {
queryId:'20180822',
queryName: 'query'
}
})
//query傳參接收
this.queryName = this.$route.query.queryName;
this .queryId = this.$route.query.queryId;
最終不管是path引入還是name引入效果都一樣如下圖
2·params傳遞引數
注:使用params傳參只能使用name進行引入
- 使用params傳參
//params傳參 使用name
this.$router.push({
name:'second',
params: {
id:'20180822',
name: 'query'
}
})
//params接收引數
this.id = this.$route.params.id ;
this.name = this.$route.params .name ;
//路由
{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}
效果如下圖
需要注意的是:
- params是路由的一部分,必須要在路由後面新增引數名。query是拼接在url後面的引數,沒有也沒關係。
- params一旦設定在路由,params就是路由的一部分,如果這個路由有params傳參,但是在跳轉的時候沒有傳這個引數,會導致跳轉失敗或者頁面會沒有內容。
如果路由後面沒有 /:id/:name效果如下圖,位址列沒有引數
但是如果你重新整理一下,就會發現頁面失敗,效果如下圖
因此我們不可能讓使用者不要重新整理,所以我們必須在路由後面加上 /:id/:name
- 如果使用path進行傳參
//params傳參 使用path
this.$router.push({
path:'second',
params: {
id:'20180822',
name: 'query'
}
})
//params接收引數
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;
效果如下圖
使用path傳參什麼效果都沒有。
3.總結
- 傳參可以使用params和query兩種方式。
- 使用params傳參只能用name來引入路由,即push裡面只能是name:’xxxx’,不能是path:’/xxx’,因為params只能用name來引入路由,如果這裡寫成了path,接收引數頁面會是undefined!!!。
- 使用query傳參使用path來引入路由。
- params是路由的一部分,必須要在路由後面新增引數名。query是拼接在url後面的引數,沒有也沒關係。
- 二者還有點區別,直白的來說query相當於get請求,頁面跳轉的時候,可以在位址列看到請求引數,而params相當於post請求,引數不會再位址列中顯示。
PS: 可能寫的不夠詳細,或者有所缺失,請大家幫忙補充,同時還是那個問題,使用query為什麼不能用params傳參?會不會因為是卻依然相當於get請求的方式,所以不可以。有人知道的話麻煩告訴我一下,非常感謝。