Vue页面传参详解

内容分享18小时前发布 王佳艺
0 1 0

一、两种方式

方法1:name跳转页面

this.$router.push({name:'anotherPage',params:{id:1}})

另一页面接收参数方式:

this.$route.params.id

示例:

Vue页面传参详解

控制台展示:

Vue页面传参详解

方法2:path跳转页面

this.$router.push({path:'/anotherPage',query:{id:1}})

另一页面接收参数方式:

this.$route.query.id

示例:

Vue页面传参详解

二、区别

1、path的query传参的参数会带在url后边展示在地址栏(/anotherPage?id=1),name的params传参的参数不会展示到地址栏。

2、由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效,需要用name来指定页面。

© 版权声明

相关文章

1 条评论

  • 头像
    相濡以沫 读者

    收藏了,感谢分享

    无记录
    回复