Home > Web Front-end > JS Tutorial > body text

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

不言
Release: 2018-07-07 10:09:50
Original
4817 people have browsed it

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  页面进来,先获取默认数据

    }

  },
  }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!