长春网站制作的公司哪家好,网站建设与实践高自考,数字广东网络建设有限公司简介,怎样联系网站管理员前端时间项目迭代#xff0c;其中有个需求 在vue里面#xff0c;有a.b.c三个页面#xff0c;要达到的效果是从a页面进去b页面#xff0c;b页面需要刷新#xff0c;但若从b页面进入c页面了以后再回到b页面#xff0c;b页面需要保留之前的值#xff0c;不做刷新#xff1…前端时间项目迭代其中有个需求 在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
//jscomputed: {keepAlive () {return this.$store.getters.keepAlive}},//html
keep-alive :includekeepAliverouter-view/router-view
/keep-alive
vuex 中需要定义keepAliveimport Vue from vue
import Vuex from vuexVue.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.nameserve) {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.nameserve || to.nameaddSuccess) {this.$store.commit(SET_KEEP_ALIVE, []) }next()},
这样就实现了vue 部分页面缓存部分页面不缓存的问题
