vue传参页面刷新数据丢失问题（全面）

约定不等于承诺〃 2023-06-20 13:57 96阅读 0赞

在做vue的时候，经常会遇到组件之间数据的传递问题，通过params或者query传参，但是，当页面刷新的时候，数据会丢失，找不到数据。今天经过总结，解决了这个问题。通过了一下几种情况进行传值：

*  通过路由params传参
 *  通过路由query传参
 *  通过vuex

**1.通过params传参**

先在路由path里那个组件需要传递参数，定义一个参数，用于组件传递，params刷新页面数据会丢失。

path: "/chatView/:user"
    //这里值用:加参数的写法，user即为参数，注意一定要用/隔开

**![format_png][]**

在你的组件中，通过点击传递参数，targetUser传的参数

![format_png 1][]

然后需要用的组件接受，通过beforeRouteEnter进入路由之前执行的函数

![format_png 2][]

**1.通过query****传参**

路由传值有两种方式，params和query，params传值刷新页面是要消失的，然而query却不会，两者的区别就在于query会把传递的参数显示在url地址中,就像下面这样

![format_png 3][]

也是在你的组件中，执行什么方法。触发什么事件，把参数传递过去

JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串

![format_png 4][]

然后需要用的组件接受，通过beforeRouteEnter进入路由之前执行的函数

![format_png 5][]

这样无论怎么刷新，数据都不会丢失。

**3.通过vuex取**

最好办的就是通过vuex来存和取你的数据，把你的数据都存在vuex中，然后那个组件需要，直接调用vuex的getters来获取数据就行。

在你的getters文件中

![format_png 6][]

在组件中如果想取到的话，直接通过计算属性。

![format_png 7][]

以上是路由传参和vuex存值、传值的时候刷新页面数据消失的解决办法。喜欢的可以关注一下。

4.通过本地存储loaclStorage

新建文件utils/localstorage里：

let db = {
      save (key, value) {
        localStorage.setItem(key, JSON.stringify(value))
      },
      get (key, defaultValue = {}) {
        return JSON.parse(localStorage.getItem(key)) || defaultValue
      },
      remove (key) {
        localStorage.removeItem(key)
      },
      clear () {
        localStorage.clear()
      }
    }
    
    export default db

需要的组件中引入db:
    import db from 'utils/localstorage'

// 编辑
    iconEdit (record) {
      this.loading = true
      this.$get('/business/inspection-task/findInspectionTaskById/' + record.id + '/pc').then(r => {
        if (r.data.code === 200) {
          // this.$router.push({path: '/business/bizInspectionTaskSub', query: {flag: '2', data: JSON.stringify(r.data.data)}})
          this.$router.push({path: '/business/bizInspectionTaskSub', query: {flag: '2'}})
          db.save('edit', r.data.data) //给变量edit赋值保存到db中
        } else {
          this.$message.warning(r.data.msg)
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }

在编辑页面通过db获取变量edit的值

先引入db

import db from 'utils/localstorage'

mounted () {
      console.log(db.get('edit')) //打印出edit的值
      // alert(this.$route.query.data)
      // console.log(JSON.parse(this.$route.query.data))
      // flag为1表示添加,2为编辑
      this.flag = this.$route.query.flag
      // 初始化获取设施编号列表
      this.getFacilityNoList()
      // 初始化获取用户下拉列表
      this.getUserList()
      // 初始化获取已存在任务中的设施
      this.findTaskFacilityList()
      // 初始化加载编辑数据
      if (this.flag === '2') {
        const data = db.get('edit') //赋值
        // console.log(data)
        this.params.id = data.id
        this.params.facilityId = data.facilityId
        this.params.facilityLocation = data.facilityLocation
        this.params.facilityName = data.facilityName
        this.params.patrolDate = data.patrolDate.toString()
        this.params.patrolId = data.patrolId
        this.dataSource = data.baseFacilitySub
        this.form.setFieldsValue({
          facilityId: data.facilityId,
          patrolDate: this.params.patrolDate,
          patrolId: data.patrolId
        })
      }
    },

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE5MDEvMTE4ODM3OC0yMDE5MDEyNTEzMjMyMjE4OC0xMDgxOTMxMjIyLnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE5MDEvMTE4ODM3OC0yMDE5MDEyNTEzMjUxNjY1NS0xMjIxMjkxOTk0LnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE5MDEvMTE4ODM3OC0yMDE5MDEyNTEzMjU1NDM3Ny0yMzQwMzAyNDYucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE5MDEvMTE4ODM3OC0yMDE5MDEyNTEzMzAyOTY4MS04NzE4MjQwNDgucG5n?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE5MDEvMTE4ODM3OC0yMDE5MDEyNTEzMzE0MzIyMS03NDkwNjc5NDEucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE5MDEvMTE4ODM3OC0yMDE5MDEyNTEzMzM0NDA2NC00ODUyOTg2OTAucG5n?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE5MDEvMTE4ODM3OC0yMDE5MDEyNTEzMzcyMzU5Ni0yMDExMDEwNjc5LnBuZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTE4ODM3OC8yMDE5MDEvMTE4ODM3OC0yMDE5MDEyNTEzMzYzMzY1OS0xODczNTIxNTE2LnBuZw?x-oss-process=image/format,png