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 }) },
再刷新界面,数据依然还在。原因分析:
路由携带参数,当刷新界面的时候,携带的参数就没有了。这里必须要有跳转这个动作,才会有参数,如果跳转后,直接刷新界面,这时候是没有跳转动作的,参数也就没有了。所以需要将数据存入缓存中。