在嵌套vue-router情況下狮腿,不同頁面之間傳遞參數(shù)可以通過params實現(xiàn)确镊。而params傳參分為兩種情況:
1.參數(shù)在url中顯示
首先你要確定自己要傳的參數(shù)垛玻,并在控制路由的文件中的Router中path內(nèi)添加對應(yīng)的字段如:
{
????????path:'/paramsUrl/:name/:age/:sex',
????????component:paramsUrl
}
我要傳的參數(shù)是姓名先慷,年齡以及性別欠雌。
在你要跳轉(zhuǎn)的組件內(nèi)定義參數(shù),如:
stu:{name:'Tom',age:18,sex:'male'}
同時在HTML中引入它們稽亏,通過router-link跳轉(zhuǎn)(也可以通過點擊事件壶冒,push()跳轉(zhuǎn)),插入對應(yīng)的字段。注意:如果參數(shù)個數(shù)不同截歉,將不會出現(xiàn)預(yù)期效果胖腾!
<router-link :to="{path:'/paramsUrl/'+stu.name+'/'+stu.age+'/'+stu.sex}"><button>goto paramsUrl</button></router-link>
當(dāng)然,你也可以通過this.$route.params.name來獲取參數(shù)
2.通過name避免在url顯示
通過上面的介紹瘪松,相信你也看出來相對應(yīng)的弊端~不安全咸作。如果用戶篡改url中的參數(shù),將會出現(xiàn)我們不想看到的問題宵睦。那么如何避免呢记罚?---name
上邊對Router中的操作只是改了?path,現(xiàn)在我們在添加一個name參數(shù)。
{? path: '/param',? name: 'param',? component: param },
這里我們通過點擊事件進行跳轉(zhuǎn)~
<button @click="goParam">go to param</button>
在methods中編寫方法
goParam:function(){
? ? this.$router.push({name:'param',params:this.stu})
}
我還是比較喜歡第二種方法壳嚎,不僅安全而且不用編寫相對應(yīng)的參數(shù)桐智,想傳什么直接在data中添加即可。
讀取參數(shù)的方法同上~