After vue obtains the page details, how to monitor whether the user has modified the information when switching pages?

This article mainly introduces how to monitor whether the user has modified the information when switching pages after getting the page details in vue. It has a certain reference value. Now I share it with everyone. Friends in need can refer to it

You can use beforeRouteLeave and updated to judge. export default {

name: 'supplier',
    components:{cmtWrap,cmtContent},
    props: [],
    beforeRouteLeave (to, from, next) {//离开当前页
      if(this.updateCount > 1){ //更新次数大于1 说明用户修改过当前页数据 因为获取详情时会更新一次
        if(from.path.includes('nowPath')){
          this.$confirm('即将离开当前页，请确定是否保存当前数据？', '离开当前页', {
            confirmButtonText: '保存',
            cancelButtonText: '不保存',
            type: 'warning'
          }).then(() => {
            //...todo 这里调接口 保存数据
            next()
          }).catch(() => {next()});
        }else{next()}
      }else{
        next()
      }
    },
    updated:function () {
      this.updateCount = this.updateCount + 1
    },
    data() {
      return {
        updateCount:0,//判断用户是否更新当前数据
      }
    },
    computed:{},
    watch:{},
    mounted:function () {　　　　this.getInitData()　　},
    methods: {
　　　　getInitData:function(){
　　　　//...todo  页面进来，先获取默认数据

　　　　}

　　},
  }

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

vue implements timely update of the list after clicking to follow

elementui and el-upload are in v-for How to get index

when using it

The above is the detailed content of After vue obtains the page details, how to monitor whether the user has modified the information when switching pages?. For more information, please follow other related articles on the PHP Chinese website!