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