日常業(yè)務(wù)中，路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見(jiàn)的，傳參的方式有三種：

1）通過(guò)動(dòng)態(tài)路由方式

//路由配置文件中 配置動(dòng)態(tài)路由{ path: ’/detail/:id’, name: ’Detail’, component: Detail }//跳轉(zhuǎn)時(shí)頁(yè)面var id = 1;this.$router.push(’/detail/’ + id) //跳轉(zhuǎn)后頁(yè)面獲取參數(shù)this.$route.params.id

2）通過(guò)query屬性傳值

//路由配置文件中{ path: ’/detail’, name: ’Detail’, component: Detail }//跳轉(zhuǎn)時(shí)頁(yè)面this.$router.push({ path: ’/detail’, query: { name: ’張三’， id: 1, }}) //跳轉(zhuǎn)后頁(yè)面獲取參數(shù)對(duì)象this.$route.query

3）通過(guò)params屬性傳值

//路由配置文件中{ path: ’/detail’, name: ’Detail’, component: Detail }//跳轉(zhuǎn)時(shí)頁(yè)面this.$router.push({ name: ’Detail’, params: { name: ’張三’， id: 1, }}) //跳轉(zhuǎn)后頁(yè)面獲取參數(shù)對(duì)象this.$route.params

總結(jié)：

1.動(dòng)態(tài)路由和query屬性傳值 頁(yè)面刷新參數(shù)不會(huì)丟失， params會(huì)丟失

2.動(dòng)態(tài)路由一般用來(lái)傳一個(gè)參數(shù)時(shí)居多(如詳情頁(yè)的id), query、params可以傳遞一個(gè)也可以傳遞多個(gè)參數(shù) 。

補(bǔ)充方法：

頁(yè)面刷新數(shù)據(jù)不會(huì)丟失

methods：{ insurance(id) { //直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn) this.$router.push({ path: `/particulars/${id}`, })}

需要對(duì)應(yīng)路由配置如下：

this.$route.params.id

到此這篇關(guān)于vue路由跳轉(zhuǎn)傳遞參數(shù)的方式總結(jié)的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn)傳遞參數(shù)的三種方式內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！