前端如何给特定的组件设置缓存并处理定位问题?

前端如何给某些组件设置缓存并处理定位?

最近有个需求就是a=>b,b页面处理了些操作,返回a页面时,

b页面若有操作则a页面需要刷新并定位到上次点击的位置,b若没有操作则无需刷新直接定位上次点击的位置

1.首先在store中存储缓存的组件

javascript 复制代码
vuex代码:
const cached = {
  state: {
    cachedPage: []
  },
  getters: {
    getCachedPage (state) {
      return state.cachedPage;
    }
  },
  actions: {
    addCached ({ commit }, view) {
      console.log('view', view)
      commit('ADD_CACHED', view)
    },
    delCached ({ commit }, view) {
      commit('DEL_CACHED', view)
    }
  },
  mutations: {
    ADD_CACHED: (state, view) => {
      if (state.cachedPage.includes(view.name)) return;
      state.cachedPage.push(view.name);
    },
    DEL_CACHED: (state, view) => {
      const index = state.cachedPage.indexOf(view.name);
      index > -1 && state.cachedPage.splice(index, 1);
    },
  },
}
export default cached

2.在app.vue组件中使用keep-alive缓存组件
加粗样式

javascript 复制代码
<keep-alive :include="getCachedPage">
    <router-view></router-view>
 </keep-alive>
<script >
import { mapGetters } from 'vuex'; 
export default {
  name: 'App',
  computed: {
    ...mapGetters(['getCachedPage']),
  }, 
</script>

3.在需要缓存的组件中,使用组件内的守卫方法,代码如下:
注意:name不要写错了

javascript 复制代码
export default {
  name: 'home',
  beforeRouteEnter(to, from, next) {
    console.log(from);
    store.dispatch('addCached', to);
    next((vm) => {
      vm.routeName = to.name;
    });
  },
  beforeRouteLeave(to, from, next) {
    console.log(to, from);
    //记录上次点击的位置
    this.scrollTop = document.documentElement.scrollTop;
    next();
  },
  activated() {
    //刷新列表
    if (this.routeName === 'details') {
      //调用刷新列表的接口
    } else {
      //无需刷新缓存
      document.documentElement.scrollTop = this.scrollTop;
    }
  },
}
相关推荐
gnip3 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫4 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel5 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼5 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手9 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法9 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku9 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode9 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu9 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu9 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript