vue路由傳參的三種方式以及解決

1、vue路由傳參的三種方式以及解決最近項(xiàng)目中涉及到跨頁面?zhèn)鲄?shù)和后臺舉行數(shù)據(jù)交互，看到需求之后第一反應(yīng)就是用路由傳參來解決；vue中給我們提供了三種路由傳參方式，下面我們一個(gè)一個(gè)的來看一下： 辦法一：params傳參： this.$router.push( name:"admin",/這里的params是一個(gè)對象，id是屬性名，item.id是值(可以從當(dāng)前組件或者vue實(shí)例上挺直取) params:id:item.id) /這個(gè)組件對應(yīng)的路由配置/組件路徑 path: &39;/admin&39;,/組件別號 name: &39;ad

2、min&39;,/組件名 component: admin, 通過params傳遞參數(shù)，假如我們想獵取id的 參數(shù)值，我們可以通過this.$route.params.id這種方式來打印出來就可以得到了；（注重：獵取參數(shù)的時(shí)候是$route，跳轉(zhuǎn)和傳參的時(shí)候是$router） 辦法二：路由屬性配置傳參： this.$router.push( name:"/admin/$item.id",) /這個(gè)組件對應(yīng)的路由配置/組件路徑 path: &39;/admin:id&39;,/組件別號 name: &39;admin&3

3、9;,/組件名 component: admin, 我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月收拾了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有收拾，送給每一位前端小伙伴，想要獵取的可以關(guān)注我并在后臺私信我：前端，即可免費(fèi)獵取。 通過路由屬性配置傳參我們可以用this.$route.params.id來獵取到id的值，注重this.$router.push辦法里面路徑帶的是值，路由配置項(xiàng)那里帶的是變量名(屬性名)來實(shí)現(xiàn)的對應(yīng)； 以上兩種傳參方式基本上可以理解為ajax中的post哀求方式，參數(shù)都是不行見的，但是上

4、面兩種辦法都有一個(gè)弊端，就是當(dāng)頁面刷新了是獵取不到參數(shù)值的，那么有沒有一種辦法是頁面刷新之后參數(shù)依舊存在呢？ 辦法三：query傳參 this.$router.push( name:"/admin", query:id：item.id) /這個(gè)組件對應(yīng)的路由配置/組件路徑 path: &39;/admin&39;,/組件別號 name: &39;admin&39;,/組件名 component: admin, 第三種方式是用query來傳參，這種方式是可以解決頁面刷新參數(shù)消逝問題的，這種方式可以理解為是ajax中的get辦法，參數(shù)是挺直在url后面添加的，參數(shù)是可見的，所以解決頁面刷新參數(shù)消逝問題建議用法辦法三來解決； 其實(shí)解決頁面刷新參數(shù)走失問題的計(jì)劃還有無數(shù)，比如把參數(shù)存在sessionstorange或者localstorange中都是可行的，不過我們既然用vue框架，就要用vue的方式來解決問題