欢迎光临
我的个人博客网站

Vue中路由传参


前言

记录Vue的路由传参方法

参数在url路径上显示

方法一

$router.push传参

//传参: this.$router.push({ path: '/xxxxxxxx', query: { str: '传过去的值' }}) //接收: this.string = this.$route.query.str 

方法二

路由配置传参

//配置: path: '/xxxxxxxx/:msg', props: true, //传参: this.$router.push('/xxxxxxxx/' + '传过去的值')  //接收: props: { msg: { // 定义所传值的类型 type: String,   required: true   } } 

方法三

路由配置传参(对象)

//配置: path: '/xxxxxxxx/:msg', props: true, //传参: this.$router.push('/xxxxxxxx/' + encodeURIComponent(JSON.stringify(Object)) //接收: props: {     msg: {     // 定义所传值的类型     type: String, // 通过上页面转成了String     required: true     } } //使用: var obj= JSON.parse(this.msg) 

原理:
1、使用encodeURIComponent(JSON.stringify(Object))把字符串作为 URI 组件进行编码
2、接着使用 JSON.parse(decodeURIComponent(this.msg)) 或者 decodeURIComponent(JSON.parse(this.msg))进行解码转换为Object
3、上面两种哪个正确的不知道,两个我都拿不到Object,直接JSON.parse(this.msg)就拿到数据了

参数不在url路径上显示

笔记丢失,日后补充…

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue中路由传参
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏