Vue 当前页面刷新---其他页面跳转两种方式 data 数据状态 处理

版权声明：无需声明 https://blog.csdn.net/Sun_Shydeo/article/details/89076170

1、vue当前页面刷新保存 data内某个数据值 不重置

//钩子函数 created
created() {
    //刷新当前页面 获取 changeStyle 对 data 设置
    this.isFocus = JSON.parse(window.sessionStorage.getItem('newsFlag')) || 0;
},
methods: {
    //改变当前页面数据 isFocus
    changeStyle: function(e) {
      var id = e.target.getAttribute('data-id');
      this.isFocus = id;

      //sessionStorage 保留当前页面设置
      id && window.sessionStorage.setItem('newsFlag',JSON.stringify(id));
    }
  }

2、其他页面路由跳转设置

page.vue 

methods: {
    toNews(e) {
      this.$router.push({ path: '/news' });
      window.sessionStorage.setItem('newsFlag', JSON.stringify(0));
    }
}

 

<div class="col-xs-1-5" @click="toNews">
    <div>
       消息
    </div>
</div>

news.vue

//更新前重置data 内数据
beforeUpdate() {
    //由其他页面跳转过来，更新重置 data
    this.isFocus = JSON.parse(window.sessionStorage.getItem('newsFlag')) || 0;
}