文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue项目keepAlive配合vuex动态设置路由缓存方式

2024-04-02 19:55

关注

需求

首页 → 列表页→ 详情页(缓存列表页面 ) → 列表页(不重新加载列表页)→ 首页(清除列表页的缓存)

效果图

在这里插入图片描述

解决方案

直接使用keepAlive会出现一个问题,当从查询1进入列表页面,这时缓存list组件,然后返回首页,点击查询2,会发现list的数据是查询1的,因为这里直接调用了上一次的缓存因此,在返回首页后需清除list的缓存,下次进入list将重新初始化。

利用keepAlive进行路由缓存,keepAlive的include 和 exclude 属性允许组件有条件地缓存。

配合vuex维护一个缓存数组即可,不多BB,直接上代码

1.App.vue文件

利用include属性进行选择性缓存

<template>
  <div style="height: 100%;">
    <keep-alive :include="$store.state.common.cachedRouteNames">
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
export default {
  name: 'App'
};
</script>

2.main.js文件

配置路由keepAlive状态


import Vue from 'vue';
// import Vue from 'vue/dist/vue.esm.js'
import App from '../src/App.vue';
import router from '../src/router/index';
// import "../src/assets/style/reset.css";
import 'lib-flexible';
import utils from './utils/utils';
import store from './store/index';
// 配置路由keepAlive状态
utils.setRouterBeforeEach(router);
// runtime模式
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

3.store/modules/common.js文件

vuex管理缓存数组,编写添加和删除缓存路由方法

const UPDATE_CACHEDROUTENAMES = 'update_cachedroutenames';
const state = {
  activatedReloadData: true, // 页面activated时是否需要重新加载
  // 缓存的路由列表
  cachedRouteNames: []
};
const mutations = {
  [UPDATE_CACHEDROUTENAMES](st, { action, route }) {
    const methods = {
      add: () => {
        st.cachedRouteNames.push(route);
      },
      delete: () => {
        st.cachedRouteNames.splice(st.cachedRouteNames.findIndex(e => e === route), 1);
      }
    };
    methods[action]();
  }
};
export default {
  namespaced: true,
  state,
  mutations
};

4.utils/utils.js文件

配置路由keepAlive状态

import store from '../store/index';
const { cachedRouteNames } = store.state.common;
const changeRoutes = (route, type) => {
  const routeName = route.components.default.name;
  if (routeName && type === 'add' ? !cachedRouteNames.includes(routeName) : cachedRouteNames.includes(routeName)) {
    store.commit('common/update_cachedroutenames', {
      action: type,
      route: routeName
    });
  }
};
// 定义添加缓存组件name函数,设置的时组件的name
const addRoutes = (route) => {
  changeRoutes(route, 'add');
};
// 定义删除缓存组件name函数,设置的是组件的name
const deleteRoutes = (route) => {
  changeRoutes(route, 'delete');
};
// 配置路由keepAlive状态
const setRouterBeforeEach = (router) => {
  router.beforeEach((to, from, next) => {
    // 对该组件是否读取缓存进行处理
    to.matched.forEach((item) => {
      const routes = item.meta.cachedRouteNames;
      if (item.meta.keepAlive && (!routes || (routes && (!from.name || routes.includes(from.name))))) {
        addRoutes(item);
      } else {
        deleteRoutes(item);
      }
    });
    next();
  });
  // 全局混入。在该组件被解析之后,若是属于需要缓存的组件,先将其添加到缓存配置中,进行缓存
  Vue.mixin({
    beforeRouteEnter(to, from, next) {
      next(() => {
        to.matched.forEach((item) => {
          if (to.meta.keepAlive) {
            addRoutes(item);
          }
        });
      });
    },
  });
};
export default {
  setRouterBeforeEach
};

5.store/index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import mutations from './mutations';
import state from './state';
import getters from './getters';
import app from './modules/app';
import common from './modules/common';
Vue.use(Vuex);
const store = new Vuex.Store({
  modules: { app, common },
  state,
  mutations,
  actions,
  getters
});
export default store;

6.router/index.js文件

// An highlighted block
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const Home = resolve => require(['../routers/Home.vue'], resolve);
const List = resolve => require(['../routers/list.vue'], resolve);
const Detail = resolve => require(['../routers/detail.vue'], resolve);
const router = new VueRouter({
  routes: [
    {
      name: 'Home',
      path: '/home',
      component: Home
    },
    {
      name: 'List',
      path: '/list',
      component: List,
      meta: {
        keepAlive: true,
        // 缓存条件:从List --> Detail 则缓存List
        cachedRouteNames: ['Detail']
      }
    },
    {
      name: 'Detail',
      path: '/detail',
      component: Detail
    }
  ]
});
export default router;

7.routers/Home.vue文件

export default {
  name: 'Home',
  components: {
    HeaderBar
  },
  data() {
    return {
      list: [
        '查询1',
        '查询2'
      ]
    };
  },
  created() {
    // this.getData();
    // console.log(111111);
  },
};
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯