VUE路由传参有3种方式

VUE路由传参有3种方式

1)query方式
(push时使用path来匹配)
发起页面:this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …eturn{ id:this.router.query.id; //这里接收参数
}
}
}

跳转转收页面的时候,地址栏会显示:
http://ip:port/accept?id=222
2)params模式
(push时使用name来匹配)
发起页面:
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …eturn{ 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