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

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