vue实现前进刷新，后退不刷新

版权声明：本文为博主原创文章，未经博主允许不得转载。转载注明出处。 https://blog.csdn.net/zuoyiran520081/article/details/80880890

项目中遇到可以有多个入口进入一个页面a，在a页面要调不通的接口进行判断所带过来的信息，可在mounted里面进行判断，此页面还有二级页面可以选择数据，那么就要求从二级页面退回页面a时，不走mounted里面的方法重新调取数据，不然会覆盖掉二级页面带回来的数据，所以就需要进入页面a时进行数据刷新，但是退回到页面a时，则不刷新该数据。

说明：例子为从页面2进入页面3时，调用接口，并把数据存到vuex中，从页面3进入页面4时，重新给页面3保存到vuex的数据进行赋值，在页面3中展示改变后的值。
文件结构如下图：

方法一：通过判断前进后退来实现

1.在vuex的store.js文件中新建direction和includePage两个变量来存储前进后退的判断值，完整的代码在下面方法二中的store.js中。
2.修改app.vue的代码：

<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')" >
    <keep-alive :include='includePage'>
        <router-view class='router-view'></router-view>
    </keep-alive>
</transition>

3.修改main.js中的代码为：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import store from './vuex/store'
import App from './App'
import router from './router'
import './common/rem.js'
import "./assets/iconfont/iconfont.css"

Vue.config.productionTip = false

const history = window.sessionStorage
history.clear()
let historyCount = history.getItem('count') * 1 || 0
history.setItem('/', 0)
router.beforeEach(function(to, from, next) {
   const toIndex = history.getItem(to.path);
   const fromIndex = history.getItem(from.path);
//根据路由判断操作是前进还是后退，并把标记值存入vuex
   if(toIndex) {
      if(!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
         store.commit('UPDATE_DIRECTION', 'forward')
      } else {
         store.commit('UPDATE_DIRECTION', 'reverse')
         history.removeItem(from.path)
      }
   } else {
      ++historyCount
      history.setItem('count', historyCount)
      to.path !== '/' && history.setItem(to.path, historyCount)
      store.commit('UPDATE_DIRECTION', 'forward')
   }
   if(/\/http/.test(to.path)) {
      let url = to.path.split('http')[1]
      window.location.href = `http${url}`
   } else {
      next()
   }
})

import myheader from './components/header'
Vue.component('myheader', myheader);

new Vue({
    el: '#app',
    store,
    router,
    components: { App },
    template: '<App/>'
})

4.在每次进入页面时执行调用方法，并把值存入vuex中。在mounted中执行以下方法：

getVal(){
    GetLocalMethod('./static/data.json', '', true).then(res => {
       store.commit('UPDATE_SAVETHREEVALUE', res.data.data[0].aa);
    });
}

加上判断:

if(this.direction == 'forward'){  //进入到此页面
    this.getVal();
}else{  //退回到该页面

}

注：关键是判断前进和后退的值
结束。

方法二：用keep-alive缓存来实现

用router.meta实现：
1.在app.vue中改写router-view，对router-view分开写（需要缓存和不需要缓存）

<keep-alive>
    <!--会被缓存的视图组件-->
    <router-view v-if="$route.meta.keepAlive" class='router-view'></router-view>
</keep-alive>
<!--不会被缓存的视图组件-->
<router-view v-if="!$route.meta.keepAlive" class='router-view'></router-view>

注：需要缓存功能必须用keep-alive标签进行包裹。
2.在路由index.js里面对页面3进行设置：

{
   path: '/threePage',
   name:'threePage',
   title: 'threePage',
   component: threePage,
   meta: {
      keepAlive: true // 需要被缓存
   }
}

并调用以下方法把从接口获取的值写入vuex中的saveThreeVal进行保存：

getVal(){
    GetLocalMethod('./static/data.json', '', true).then(res => {
       store.commit('UPDATE_SAVETHREEVALUE',    res.data.data[0].aa);
    });
}

在进入页面时判断一下keepAlive的值并调用上面方法（进入页面3时this.$route.meta.keepAlive值为false，退回到页面3时，this.$route.meta.keepAlive值为true）

mounted(){
    if(!this.$route.meta.keepAlive){
       this.getVal();
    }
 }

3.在页面2中加入：

beforeRouteLeave(to, from, next) {
   // 设置下一个路由的 meta
   to.meta.keepAlive = false; // 让页面3不缓存，即刷新
   next();
}

注：beforeRouteLeave方法和data、mounted方法等是同一级别的。
4.在页面4中加入：

beforeRouteLeave(to, from, next) {
   // 设置下一个路由的 meta
   to.meta.keepAlive = true;  // 让页面3缓存，即不刷新
   next();
}

并在页面4中执行对页面3写入到的vuex的saveThreeVal重新赋值：
在mounted内执行：

mounted(){
    store.commit('UPDATE_SAVETHREEVALUE', 'abababab');
}

完成。

通过页面的整体缓存实现，其实也是用到了keep-alive。

操作说明：页面3进入页面4时，调用接口，并保存数据到vuex的saveFourVal中，同时页面上有输入框可以输入数据（此数据未保存到vuex中），从页面4进入页面5后，在页面5中对vuex的saveFourVal进行重新赋值，退回到页面4后不调用接口，并且之前输入到输入框中的值未被置空，还保留为此前输入值后的状态。

这个方法比较完整，具体操作如下：

1.在app.vue中改写router-view。

<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')" >
    <keep-alive :include='includePage'>
        <!--会被缓存的视图组件-->
        <router-view v-if="$route.meta.keepAlive" class='router-view'></router-view>
        <router-view v-if="!$route.meta.keepAlive" class='router-view'></router-view>
    </keep-alive>
</transition>

注：其中includePage是个数组，可以缓存多个页面。

2.在vuex文件中的store.js中新建一个数组includePage用于保存要缓存的页面。
代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './types'

Vue.use(Vuex)

const state = {
   direction: 'forward',
   includePage: [],
   saveOneValue:'', //保存的第一个页面的值
   saveThreeValue:'',//第三个页面保存的值
   saveFourValue:'',//第四个页面保存的值
}

const actions = {

}

const getters = {
   direction: state => state.direction,
   includePage: state => state.includePage,
   saveOneValue:state => state.saveOneValue,
   saveThreeValue:state => state.saveThreeValue,
   saveFourValue:state => state.saveFourValue,
}

const mutations = {
   [types.UPDATE_DIRECTION] (state, direction) {
      state.direction = direction;
   },
   [types.UPDATE_INCLUDE_PAGE] (state, obj) {
      if(obj.flag){
         state.includePage.push(obj.pageName);
      }else{
         state.includePage.splice(state.includePage.indexOf(obj.pageName),1);
      }
   },
   [types.UPDATE_SAVEONEVALUE] (state, update) {
      state.saveOneValue = update;
   },
   [types.UPDATE_SAVETHREEVALUE] (state, update) {
      state.saveThreeValue = update;
   },
   [types.UPDATE_SAVEFOURVALUE] (state, update) {
      state.saveFourValue = update;
   }
}

//导出vue实例
export default new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
   state,
   actions,
   getters,
   mutations
})

注：在同个文件夹下的type.js中进行声明的。

//公共
export const UPDATE_DIRECTION = 'UPDATE_DIRECTION'  //更新routerview滑动方向

export const UPDATE_INCLUDE_PAGE = 'UPDATE_INCLUDE_PAGE'  //更新routerview缓存页面

export const UPDATE_SAVEONEVALUE = 'UPDATE_SAVEONEVALUE'  //更新存储到vuex的值

export const UPDATE_SAVETHREEVALUE = 'UPDATE_SAVETHREEVALUE'  //更新第三个页面存储到vuex的值

export const UPDATE_SAVEFOURVALUE = 'UPDATE_SAVEFOURVALUE'  //更新第四个页面存储到vuex的值

3.从页面3跳往页面4时执行方法goFour：

goFour() {
   this.$router.push(`/fourPage`);
   //对第四个页面缓存进行清除
   if (this.includePage.indexOf("fourPage") != -1) {
      this.$store.commit('UPDATE_INCLUDE_PAGE', {pageName: 'fourPage', flag: false});
   };
}

4.在页面4中，从页面3跳到页面4执行

mounted(){
    this.getFourVal();
    //将此页面进行缓存
    if (this.includePage.indexOf("fourPage") == -1) {
        this.$store.commit('UPDATE_INCLUDE_PAGE', {pageName: 'fourPage', flag: true});
    };
    console.log(this.includePage);
}

并调用以下方法把从接口获取的值写入vuex中的saveFourVal进行保存：

getFourVal(){
    GetLocalMethod('./static/data.json', '', true).then(res => {
       store.commit('UPDATE_SAVEFOURVALUE', res.data.data[0].bb);
    });
}

5.在页面5中修改vuex中的saveFourVal的值：

methods:{
   changeFourVal(){
      store.commit('UPDATE_SAVEFOURVALUE', '页面5修改后的值');
   }
},
mounted(){
   this.changeFourVal();
}

参考网址：https://segmentfault.com/a/1190000012083511

废话说完了，直接分享我的代码：
https://download.csdn.net/download/zuoyiran520081/10513197