VUE表单数据缓存跳转“刷新”判断

Posted 2023-03-18

参考技术A 效果如图

注：途中的选择常用联系人可忽略网页截图 不好调试

正常在 methods 里面写一个简单的判断让后放在 mounted 里面就可以做到
如：

如上当页面加载的时候就可以判断了，当然在表单内容被改动的时候也要调用 check()

然后会发现一个问题，第一次对于表单操作完成后 所有的判断都是正常，可当页面跳转以后或者刷新以后 会发现按钮变灰色的，但是表单里面都有数据

如下图

调试分析得出当页面进来的时候或者跳转的时候，数据可以读取缓存，但是 check 并没有执行

解决方案：
想到了vue的生命周期，在页面更新状态以后去调用 check() 就可以解决这个问题了

在如上的状态使用都可以
这是针对这个问题我的解决方案，如果各位看官们有更好更有效的方式，欢迎留言！！！！

Vue实现页面跳转上一页面不刷新

step1：配置路由缓存

export default new Router({ routes: [ { path: '/hello',      name: 'hello', meta: { keepAlive: true // 需要缓存 } }  ],  })

step2:配置App.vue文件中的的<router-view/>

<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view>

step3：使用this.$router.back()返回

按钮的返回事件 this.$router.go(-1)换成this.$router.back()