vue2前进刷新后退不刷新

网上关于前进刷新后退不刷新的代码很多，但是在项目里面都用不起来，感觉没办法真正实现该功能。我这边简单粗暴的监听window的popstate事件搞定。

首先在store里面定义好缓存相关的对象和操作

import Vue from 'vue';
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        keepAlivePages:[],
    },
    mutations:{           
        //增加缓存
        pushKeepAlivePages(state,pageName){
            
            if(state.keepAlivePages.includes(pageName)){
                console.log('此页面已在缓存中')
            }
            else {
                state.keepAlivePages.push(pageName)
            }
          
        },
        //移除最近一个缓存
        popKeepAlivePages(state){
          
            if(state.keepAlivePages.length>0){
                state.keepAlivePages.pop();
            }

        },
        //移除缓存
        removeKeepAlivePages(state,pageName){
           
            let index = state.keepAlivePages.findIndex((item) => {
                return item === pageName
            })
            if(index !== -1) {
                state.keepAlivePages.splice(index, 1)
            } else {
                console.log('该页面未被缓存')
            }
            
        },
    }
});

然后app.vue中将需要缓存的组件用keepAlive包裹，include的列表指向store里面的缓存对象

<template>
    <div id="app">
        
        <keep-alive :include="keepAlivePages">
            <router-view/>
        </keep-alive>
    </div>
</template>
<script>
import Vue from 'vue';

export default {
    data(){
        return{
            
        }
    },
    computed:{
        keepAlivePages:{
            get (){
                return this.$store.state.keepAlivePages;
            },
        },
    },
};
</script>

接下来在main.js中做好前进加入缓存列表后退删除缓存列表的操作即可

import Vue from 'vue'
import App from './App.vue'
import router from './router';
import store from "./store";

//路由守卫
router.beforeEach((to, from, next) => {
    //前进缓存   
    if (to.path !== from.path) {            
        store.commit('pushKeepAlivePages', to.name);
    }
    next();
})

window.addEventListener("popstate", (e)=> {
    //后退删除缓存
    store.commit('removeKeepAlivePages',router.currentRoute.name)
}, false);


//构建vue
new Vue({
    router: router,
    store: store,
    render: h => h(App),
}).$mount('#app');

目前应付手机h5应用中没有太多复杂跳转的简单页面是够了。