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

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
   })
},

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

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