After vue obtains the page details, how to monitor whether the user has modified the information when switching pages?-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

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

Jul 07, 2018 am 10:09 AM

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: &#39;supplier&#39;,
    components:{cmtWrap,cmtContent},
    props: [],
    beforeRouteLeave (to, from, next) {//离开当前页
      if(this.updateCount &gt; 1){ //更新次数大于1 说明用户修改过当前页数据 因为获取详情时会更新一次
        if(from.path.includes(&#39;nowPath&#39;)){
          this.$confirm(&#39;即将离开当前页，请确定是否保存当前数据？&#39;, &#39;离开当前页&#39;, {
            confirmButtonText: &#39;保存&#39;,
            cancelButtonText: &#39;不保存&#39;,
            type: &#39;warning&#39;
          }).then(() =&gt; {
            //...todo 这里调接口 保存数据
            next()
          }).catch(() =&gt; {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!

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