vue传参常用的两种传参方式
- query方式:
- 参数拼接在url上
- 刷新页面不会丢失数据
- 但如果传递对象或者数组过大时,会出现url过长导致异常错误的问题
- 参数为对象或者对象组成的数组时,需要使用JSON.stringify()格式化,接收时JSON.parse()解析
- 可以使用name或者path指定跳转页面
- params方式:
- 参数不会拼接在url上
- 刷新页面会丢失数据
- 只能使用name来指定跳转的页面
1、query传参方式
1.1、可以使用path或者name方式进行传参
// pageA
this.$router.push({name: 'pageB', // 1、可以用name来指定跳转的页面;2、name值是路由声明时对应name的值path: '/pageB', // 1、也可以用path来指定跳转的页面query: {'name': '张三'}})
// pageB页面接收
this$route.query.name
1.2、query传递对象或者对象组成的数组时,需要注意数据解析错误的问题
// pageA页面
this.$router.push({path: '/pageB',// 传递参数为对象组成的数组或者对象时,页面刷新会导致值变为[Object, Object],需要使用JSON.stringify()转为字符串,接收时使用JSON.parse()处理参数// 参数是有基本类型数据组成的数组时,刷新页面能正常显示query: {'nameObj': JSON.stringify({name: '张三'})}})
// pageB页面接受
JSON.parse(this.$route.query.nameObj)
2、params传参方式
this.$router.push({// path: '/pageB', // params传参,使用path来指定跳转页面时,页面可以正常跳转,但参数会丢失name: 'pageB', // 1、params传参必须指定name来指定跳转的页面;2、name值是路由声明时对应name的值params: {'name': '张三'}})
// pageB页面接收
this.$route.params.name