关于在开发中通过路由传参,刷新页面后数据丢失白屏问题

一般通过 query 传参

// 列表页
goDetail(row) { 
    this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
    })
} 

// 详情页
this.$route.query.id

注:这种方式传递的参数会在地址栏的 url 后面显示 ?id=?,类似于 get 传参;query 必须配合 path 来传参

传递的参数是对象或数组

还有一种情况就是,如果通过 query 的方式传递对象或数组,在地址栏中会被强制转换成 [object Object],刷新后也获取不到对象值。

此时可以通过 JSON.stringify() 方法将要传递的参数转换为字符串传递,在详情页再通过 JSON.parse() 转换成对象。

let parObj = JSON.stringify(obj) 
this.$router.push({
    path: '/detail',
    query: { 
        'obj': parObj
    }
}) 

// 详情页
JSON.parse(this.$route.query.obj)

猜你喜欢

转载自blog.csdn.net/qq_59020839/article/details/131830723
今日推荐