vue踩坑之生命周期失效、路由带参跳转刷新无数据等问题解决

最新推荐文章于 2024-11-19 14:40:14 发布

原创最新推荐文章于 2024-11-19 14:40:14 发布 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

vue+element项目同时被 2 个专栏收录

34 篇文章

订阅专栏

vue+element项目bug

22 篇文章

订阅专栏

本文介绍了解决Vue.js中由于路由刷新导致的数据丢失问题。通过使用路由钩子函数beforeRouteEnter来替代mounted方法，确保数据正确加载。同时，讲解了如何在跳转时保存参数至本地存储，以在刷新页面后恢复数据。

1、生命周期函数失效

界面进行跳转的时候，跳转界面首次执行mounted方法，之后跳转进入，界面数据不刷新。

解决方法：

即

/** 使用路由钩子函数进行执行 */
beforeRouteEnter (to, from, next) {
next(vm => { // 这里的vm指的就是vue实例，可以用来当做this使用

})
},

beforeRouteEnter 方法与mounted方法同级，且将mounted方法中代码注释，避免首次进入，方法执行2次。（造成生命周期失效的情况一种是使用了keep-alive，另外一种就是弹窗了。）

2、路由带参跳转至b界面，b界面有数据，当刷新b界面，数据消失问题

解决方法：

在跳转之前将参数存入缓存中，然后再新界面从缓存中取数据

在A界面中进行跳转

/** 点击表格数据进行跳转 */
cellClick(row, column, cell, event){
  let that = this;
  let object = { detail: row, projectStatus:this.projectStatus}
  localStorage.setItem("params",JSON.stringify(object)); //设置name为john
  // 跳转到详情界面
  that.$router.push({ path: '/overviewDetail',name: 'overviewDetail')
},

在B界面中进行取值（在生命周期或路由钩子函数中都可以）

beforeRouteEnter(to,from,next){
  next((vm)=>{
    vm.list = JSON.parse(localStorage.getItem('params')).detail
    vm.projectStatus = JSON.parse(localStorage.getItem('params')).projectStatus
   })
},

再刷新界面，数据依然还在。原因分析：

路由携带参数，当刷新界面的时候，携带的参数就没有了。这里必须要有跳转这个动作，才会有参数，如果跳转后，直接刷新界面，这时候是没有跳转动作的，参数也就没有了。所以需要将数据存入缓存中。