Vue中 this.$router.push 传参 及 参数接收
文章目录1、两种方式方法一：name跳转页面方法二：path跳转页面2、区别1、两种方式方法一：name跳转页面this.$router.push({name:'anotherPage',params:{id:1}});另一页面接收参数方式：this.$route.params.id示例：控制台展示：方法二：path跳转页面this.$router.push({path:'/anotherPage
·
1、两种方式
方法一：name跳转页面
this.$router.push({name:'anotherPage',params:{id:1}});
另一页面接收参数方式：
this.$route.params.id
示例：
控制台展示：
方法二：path跳转页面
this.$router.push({path:'/anotherPage',query:{id:1}});
另一页面接收参数方式：
this.$route.query.id
2、区别
1、path的query传参的参数会带在url后边展示在地址栏(/anotherPage?id=1)，name的params传参的参数不会展示到地址栏。
2、由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效，需要用name来指定页面。
3、后续添加
路由中，
JS中，
页面上，
页面路由地址中，问号前面是params（注意路由中要添加id?），问号后面是query
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
37
0- 0
已为社区贡献2条内容
所有评论(0)