Vue:不同頁面之間的傳遞參數--params

在嵌套vue-router情況下，不同頁面之間傳遞參數可以通過params實現。而params傳參分為兩種情況：

1.參數在url中顯示

首先你要確定自己要傳的參數，並在控制路由的文件中的Router中path內添加對應的字段如：

{
　　path:'/paramsUrl/:name/:age/:sex',
　　component:paramsUrl
}

我要傳的參數是姓名，年齡以及性別。

在你要跳轉的組件內定義參數，如：

stu:{name:'Tom',age:18,sex:'male'}

同時在HTML中引入它們，通過router-link跳轉（也可以通過點擊事件，push()跳轉）,插入對應的字段。注意：如果參數個數不同，將不會出現預期效果！

<router-link :to="{path:'/paramsUrl/'+stu.name+'/'+stu.age+'/'+stu.sex}"><button>goto paramsUrl</button></router-link>

當然，你也可以通過this.$route.params.name來獲取參數

2.通過name避免在url顯示

通過上面的介紹，相信你也看出來相對應的弊端~不安全。如果用戶篡改url中的參數，將會出現我們不想看到的問題。那么如何避免呢？---name

上邊對Router中的操作只是改了 path,現在我們在添加一個name參數。

{
　　path: '/param',
   name: 'param',
   component: param
},

這里我們通過點擊事件進行跳轉~

<button @click="goParam">go to param</button>

在methods中編寫方法

goParam:function(){
    this.$router.push({name:'param',params:this.stu})
}

我還是比較喜歡第二種方法，不僅安全而且不用編寫相對應的參數，想傳什么直接在data中添加即可。

讀取參數的方法同上~