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

2023-12-15 16:36:36

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

文章来源:https://blog.csdn.net/qq_42832446/article/details/135017236
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。