vue路由传参(query和params两种方式)

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