Vue:不同頁面之間的傳遞引數--params
阿新 • • 發佈:2018-12-16
1.引數在url中顯示
首先你要確定自己要傳的引數,並在控制路由的檔案中的Router中path內新增對應的欄位如:
{ path: '/details/:id', name: 'details', component: details }
我要傳的引數是活動id。
在你要跳轉的元件內定義引數,如:
var info = {id:"123",message:"成功"}
同時在HTML中引入它們,通過router-link跳轉(也可以通過點選事件,push()跳轉),插入對應的欄位。注意:如果引數個數不同,將不會出現預期效果!
<router-link :to="{path:'/details/'+stu.id}"><button>goto paramsUrl</button></router-link>
當然,你也可以通過this.$route.params.name來獲取引數
2.通過name避免在url顯示
通過上面的介紹,相信你也看出來相對應的弊端~不安全。如果使用者篡改url中的引數,將會出現我們不想看到的問題。那麼如何避免呢?---name
上邊對Router中的操作只是改了 path,現在我們在新增一個name引數。
{ path: '/details', name: 'details', component: details }
這裡我們通過點選事件進行跳轉~
<button @click="goParam">go to param</button>
在methods中編寫方法
goParam:function(){ this.$router.push({name:'details',params:info}) }