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

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