公司项目有用到vue来开发H5项目，在使用vue router的时候发现了一个小小的问题：

1.默认vue在页面跳转后，会释放掉之前的页面

2.添加keep-alive之后，发现所有的页面都会保留，但数据不会刷新，例如：

首页->列表->详情

在上面这个跳转过程中，列表存在筛选条件和搜索框，从列表页回退到首页后，再点开列表页发现筛选条件没有被清空，还是上次的记录，而且如果所有页面都不会被释放，一旦页面打开过多，内存也随之上升，可能会带来严重后果

3.分析后，我们希望做一个类似路由栈的形式，来保留历史页面，后退时释放当前页

 

实现思路：

在router组件中，提供了include属性，可以设置保留哪些页面数据，设想如果我们通过vuex来保留历史页面name，在后退时移除当前页面name就可以实现我们想要的效果

动手实现：

首先在vuex中添加好方法

const state = {
  includePageNames: []
}
const getters = {
  includePageNames: state => state.includePageNames
}

const mutations = {
  push(state, data) {
    state.includePageNames.push(data)
  },
  remove(state, data) {
    let index = state.includePageNames.indexOf(data)
    if (index !== -1) {
      state.includePageNames.splice(index, 1)
    }

  }
}

const actions = {
  pushRoute(store, data) {
    store.commit('push', data)
  },
  removeRoute(store, data) {
    store.commit('remove', data)
  }
}
export default {
  namespaced: true,
  getters,
  mutations,
  state,
  actions
}

然后再路由中进行页面拦截

    // H5 路由管理关键代码
    console.log(`to=${to} form=${from}`)
    if (store.state.Index.includePageNames.indexOf(to.name) === -1) {
      console.log('添加', to.name)
      store.dispatch('Index/pushRoute', to.name)
    } else {
      console.log('移除', from.name)
      store.dispatch('Index/removeRoute', from.name)
    }
    next()

测试发现，完美达到了我们想要得效果，废话不多说，小伙伴是不是已经激动的想看到效果

在这个动图中，我们已经发现，从home页面跳转到a页面，再跳转到b页面，后退时，b页面被释放，同时a页面的数据还在，在后退时，a页面被释放，home页面的数据也在。这样一个H5路由管理的解决方案已经得以实现

接下来，附上源码，欢迎大家下载

点我下载