1. 程式人生 > >VUE路由傳參主要的3種方式

VUE路由傳參主要的3種方式

VUE路由傳參有3種方式1)query方式(push時使用path來匹配)發起頁面:this.$router.push({path: "/accept", //接收頁面路由query: {id: 222}});路由配置:routes: [{path: "/accept"}]接受引數頁面:export default{data(){return{id:this.$router.query.id; //這裡接收引數}}}跳轉轉收頁面的時候,位址列會顯示:http://ip:port/accept?id=2222)params模式(push時使用name來匹配)發起頁面:this.$router.push({name
: "accept", //路由配置中的nameparams:{id:222}});路由配置:routes: [{name: "accept",path: "/accept"}]接收引數頁面:export default{data(){return{id:this.$router.params.id; //這裡接收}}}跳轉轉收頁面的時候,位址列顯示目的地址,不帶任何引數3)location預宣告引數模式(push使用path來匹配,但是它跟params模式不同)發起頁面:this.$router.push({path: '/accept/222'});路由配置:routes: [{path: "/accept/:id"
}]接收引數頁面:export default{data(){return{id: this.$router.params.id}}}路由跳轉時,url會顯示:http://ip:port/accept/222