$router.push 传参
时间: 2023-10-31 22:56:56 浏览: 106
vue.js this.$router.push获取不到params参数问题
5星 · 资源好评率100%
$router.push可以通过三种方式进行传参:通过path传参、通过params传参和通过query传参。
1. 通过path传参:使用该方式传递的参数会显示在URL的path中,在刷新页面时数据不会丢失。这种方式常用于数据的新增、编辑和查看详情。例如:this.$router.push(`pushAdd/${id}`),路由配置中使用path作为参数的一部分,通过this.$route.params.id来获取参数值。
2. 通过params传参:使用该方式传递的参数不会显示在URL的path中,也不会在页面刷新时丢失数据。可以通过路由的name来匹配路由。例如:this.$router.push({ name:'RoutePushEdit', params:{ id: id, data: data } }),路由配置中使用params作为参数对象,通过this.$route.params.id和this.$route.params.data来获取参数值。
3. 通过query传参:使用该方式传递的参数会显示在URL的path中,并且在页面刷新时数据不会丢失。也可以通过路由的name来匹配路由。例如:this.$router.push({ name:'RoutePushEdit', query: data }),路由配置中使用query作为参数对象,通过this.$route.query来获取参数值。
每种传参方式都有其适用的场景和特点,根据具体需求选择合适的方式进行参数传递。
阅读全文