vue项目keepAlive配合vuex动态怎么设置路由缓存

这篇文章主要介绍"vue项目keepAlive配合vuex动态怎么设置路由缓存"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"vue项目keepAlive配合vuex动态怎么设置路由缓存"文章能帮助大家解决问题。

需求

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

效果图

解决方案

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

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

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

1.App.vue文件

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

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函数，设置的时组件的nameconst addRoutes = (route) => {  changeRoutes(route, 'add');};// 定义删除缓存组件name函数，设置的是组件的nameconst 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文件

• keepAlive：设置缓存

• cachedRouteNames：设置缓存条件

// An highlighted blockimport 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);  },};

关于"vue项目keepAlive配合vuex动态怎么设置路由缓存"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。