【element-ui】vue跳回之前路由后，数据局部刷新

Z时代
2024-01-10
分类：技术分享

vue-router路由跳转回原来的页面，原来的页面局部刷新?

当选中公司名字之后，点击table里面的修改，页面会跳转到另外一个页面，修改完成保存后，又再次跳回原页面，即展示的这个页面，用户不操作了，怎么实现公司里面的input 任然是选中状态，并且数据刷新？？？
图片描述

回答：

首先你的列表数据是在哪里获取的？你在进入页面的时候再获取一下数据赋值给 data 不就好了吗？
或者修改成功跳转回来的时候通过路由参数带过来再重新赋值一下不行吗？

回答：

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
https://blog.csdn.net/leileib...

回答：

    beforeRouteLeave: function(to, from , next){
            var self = this;
            var oldData=JSON.stringify(self.tableDataBackup);
            var newData=JSON.stringify(self.tableData);
            if(newData!=oldData){
            // next(false)
            this.$confirm('有未保存的更改, 是否保存?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 选择确定
                // next();
                self.save();
                next(false);
            }).catch(() => {
                    next();
                });
            }
            else{
                next()
            }        },