在Vue中使用this.$router传递参数有两种方式:

注意: 传递参数的时候,跳到指定页面,重新刷新页面的时候,参数会丢失

解决办法:在index.jspath配置好键值一样的
在这里插入图片描述

第一种

使用这种方式,传递参数会拼接在路由后面,出现在地址栏
传递参数 – this.$router.push({path: ' 路由 ', query: {key: value}})

参数取值 – this.$route.query.key
在这里插入图片描述在这里插入图片描述

第二种

使用这种方式,参数不会拼接在路由后面,地址栏上看不到参数

传递参数 – this.$router.push({name: ' 路由的name ', params: {key: value}})

参数取值 – this.$route.params.key

在这里插入图片描述在这里插入图片描述
注意 : 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效。需要用name来指定页面。

及通过路由配置的name属性访问

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐