首先簡單來說明一下$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請求的方式,所以不可以。有人知道的話麻煩告訴我一下,非常感謝。