«

vue使用query传参页面刷新数据丢失怎么解决

时间:2024-7-13 14:22     作者:韩俊     分类: Javascript


本篇内容介绍了“vue使用query传参页面刷新数据丢失怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

    vue路由传参(使用query传参页面刷新数据丢失问题)

    1. 路由传参的两种方式

    1. params传参(刷新页面数据会丢失)

     this.$router.push({
            name:'xxx',
            params:{
              id:id
            }
          })
      
    //接收参数:
    this.$route.params.id

    2. query传参(刷新数据不会丢失)

    this.$router.push({
            path:'/xxx',
            query:{
              id:id
            }
          })
      
    //接收参数:
    this.$route.query.id

    2. 使用query传参页面刷新数据丢失问题

    注意

    在query传参的时候可能会遇到一个问题:当传递参数为对象时,第一次跳转数据是没问题的,但第二次刷新页面数据会变为[object object]

    解决办法:
    要跳转的传参页:先将数组转换为字符串。

    detailFun(row) {
          //console.log(JSON.stringify(row))
          this.$router.push({
            path: '/product',
            query: { productDetail: JSON.stringify(row) }
          })
    },

    接收页面:

     created() {
       this.orderDetail = JSON.parse(this.$route.query.productDetail)
     }

    这样转换一下刷新后数据就不会丢失。

    标签: javascript vue

    热门推荐