解决vue 部分页面缓存,部分页面不缓存的问题

前端时间项目迭代,其中有个需求 在vue里面,有a.b.c三个页面,要达到的效果是从a页面进去b页面,b页面需要刷新,但若从b页面进入c页面了以后再回到b页面,b页面需要保留之前的值,不做刷新;

第一想到的是:<router-view v-if="$route.meta.keepAlive"></router-view> ;但是由于v-if 每次会销毁页面元素,导致第一次是缓存不成功的;在网上也找到过window.reload();这种方法,但是页面会有一瞬间的空白,用户体验不是很好; 最后找了一种方法,vuex结合路由守卫可以达到此效果,具体代码如下:

首先app.vue

javascript 复制代码
//js
 
computed: {
            keepAlive () {
                return this.$store.getters.keepAlive
            }
        },
 
//html
<keep-alive  :include='keepAlive'>
    <router-view></router-view>
</keep-alive>
vuex 中需要定义keepAlive


import Vue from 'vue'
import Vuex from 'vuex'
 
 
Vue.use(Vuex)
 
var store = new Vuex.Store({
    // 定义状态
    state: {
         
        keekAlives:[],
         
    },
    mutations:{  //更改 Vuex 的 store 中的状态
        SET_KEEP_ALIVE:function(state, keekAlives){
           return state.keekAlives = keekAlives;
        }
    },
    getters: {
      keepAlive: function(state){
          return state.keekAlives
    //   keepAlive: state => state.keekAlives
      }
    }
})
 
export default store
最后在需要缓存的页面进行判断

beforeRouteEnter (to, from, next) {
     next(vm => {
               if (from.name=="serve") {
                    vm.$store.commit('SET_KEEP_ALIVE', ['addProject'])
               }
            })
        },
        beforeRouteLeave (to, from, next) {
            if (to.name == "companySearch") {
               this.$store.commit('SET_KEEP_ALIVE', ['addProject'])
            } else if (to.name=="serve" || to.name=="addSuccess") {
         this.$store.commit('SET_KEEP_ALIVE', []) 
            }
            next()
        },

这样就实现了vue 部分页面缓存,部分页面不缓存的问题!

相关推荐
GIS程序媛—椰子4 分钟前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
记录成长java27 分钟前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet
前端青山27 分钟前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
睡觉谁叫~~~31 分钟前
一文解秘Rust如何与Java互操作
java·开发语言·后端·rust
毕业设计制作和分享1 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
ketil271 小时前
Redis - String 字符串
数据库·redis·缓存
程序媛小果1 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
小屁孩大帅-杨一凡1 小时前
java后端请求想接收多个对象入参的数据
java·开发语言
从兄2 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
java1234_小锋2 小时前
使用 RabbitMQ 有什么好处?
java·开发语言