阅读模式:

Vue之路由传参

阅读量:7  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:前言记录Vue的路由传参方法参数在url路径上显示方法一$router.push传参//传参:this.$router.push({ path: '/xxxxxxxx', query: { str: '传过去的......

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路径上显示

笔记丢失,日后补充...

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: