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

目录
  • 需求
  • 效果图
  • 解决方案
    • 1.App.vue文件
    • 2.main.js文件
    • 3.store/modules/common.js文件
    • 4.utils/utils.js文件
    • 5.store/index.js文件
    • 6.router/index.js文件
    • 7.routers/Home.vue文件

需求

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

效果图

解决方案

直接使用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文件

  • keepAlive:设置缓存
  • cachedRouteNames:设置缓存条件
// 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>

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

(0)

相关推荐

  • vue内置组件keep-alive事件动态缓存实例

    在App.vue文件中配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 在路由中配置 { path: '/backstage', component: res

  • 详解keep-alive + vuex 让缓存的页面灵活起来

    引入 在使用vue + vue-router开发SPA的时候,有没有遇到过这样的情况:当我们在列表页和详情页之间切换的时候,如果列表页不做缓存,会导致每次从详情页返回时,列表页都会重新加载.如下图: 细心的朋友已经发现了,当从详情页返回列表页的时候,列表页重载了,这样的体验显然不好,这时我们可以对列表页进行缓存处理. keep-alive实现页面缓存 我们的项目不一定所有页面都需要做缓存处理,所以这里介绍两种按需缓存的方法: 方法一: 首先在定义路由的时候配置 meta 字段,自定义一个Keep

  • keep-Alive搭配vue-router实现缓存页面效果的示例代码

    Vue工程中有些页面需要有缓存.这个功能通过keep-alive组件实现,keep-alive组件可以使被包含的组件保留状态,或避免重新渲染. 在routes.js中定义路由,在路由中定义元信息(meta字段),需要缓存的页面就需要在meta对象中定义一个字段,这里设置为keepAlive,设置为true,反之,则不缓存. { path: '/a', component: () => import('@/pages/A'), meta: { title:'A', keepAlive: true

  • vue3缓存页面keep-alive及路由统一处理详解

    目录 一.前言 二.使用 1.vue2和vue3的不同 2.页面某些数据不需要缓存 3.动态设置keepAlive属性 4.使用include,exclude配置需要缓存的组件 5.部分页面过来需要缓存,部分页面过来需要刷新 6.缓存只在一级路由生效 总结 一.前言 当使用路由跳转到其他页面的时候,要求缓存当前页面,比如列表页面跳转到详情页面,需要缓存列表内容,并且保存滚动条位置,也有时候需要缓存的页面里面有部分内容不缓存,总之各种情况,下面就列举其中一些例子 vue2和vue3的使用方式是不一

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

    目录 需求 效果图 解决方案 1.App.vue文件 2.main.js文件 3.store/modules/common.js文件 4.utils/utils.js文件 5.store/index.js文件 6.router/index.js文件 7.routers/Home.vue文件 需求 首页 → 列表页→ 详情页(缓存列表页面 ) → 列表页(不重新加载列表页)→ 首页(清除列表页的缓存) 效果图 解决方案 直接使用keepAlive会出现一个问题,当从查询1进入列表页面,这时缓存li

  • vue动态设置路由权限的主要思路

    之前看到网上有些动态设置路由的,但是跟目前的项目不是很匹配,就自己动手实现了一种.主要思路就是: 1.配置路由的时候绑定好id,可后端开发完成后,与后端同步id就行,这id唯一不变,根据此id可找到路由地址及icon. const routerArr = [ { path: '', name: '', component: () => import( /* webpackChunkName: "strategiesMaintain" */ '@/components/Layout

  • Vue 动态设置路由参数的案例分析

    在vue中 可以动态设置路由参数: 1.使用this.$router.go(),与js histroy.go() 用法一直,前进1,后退-1,当前页面:0 注意 使用go时 必须是已经有访问历史记录了 案例: <template> <div> <button @click="goht">后退<button> <br/> <button @click="goqj">前进<button>

  • vue使用require.context实现动态注册路由

    需求场景: 在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁.vue页面的同时,又要再router.js文件里面注册路由,感觉有点无聊和枯燥.基于此出发点,考虑能否自动读取文件夹下的文件进行路由注册. 借鉴思路: 参考vue的功能基础组件的自动化全局注册,看到一个require.context方法,可以读取某个文件夹下的文件信息.因此考虑,使用这个方法,获取views文件夹下的.vue页面,文件夹名称作为路由名称 require.context的使用介绍: 一个webpa

  • vue项目中运用webpack动态配置打包多种环境域名的方法

    在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-env,npm install cross-env --save -dev,用于配置命令行输入命令. 2. 修改package.json里的script命令: 配置了test(测试),ready(预发布),prod(正式)三种环境,npm run build 默认设置成 npm run build:p

  • 关于vue中根据用户权限动态添加路由的问题

    根据用户的权限,展示不同的菜单页. 知识点 路由守卫(使用了前置守卫):根据用户角色判断要添加的路由 vuex:保存动态添加的路由 难点 每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由. (若没有判断 则会一直添加 导致内存溢出) 根据角色判断路由 过滤动态路由 判断每条路由角色是否与登录传入的角色一致 <template> <div> <el-menu :default-active=&q

  • vue中keep-alive组件实现多级嵌套路由的缓存

    目录 现状(问题): 探索方案: 实现方式 现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1.直接将路由扁平化配置,都放在一级或二级路由中方案2.再一层缓存组件用来过渡,并将其name配置到include中 实现方式 方案1不需要例子,按规则配置路由就行重点介绍方案2因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现. 直接看原有代码(问题代码) // src/la

  • Vue项目使用localStorage+Vuex保存用户登录信息

    本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults.baseURL = baseURL // 登录请求 const loginCheck = params => { return axios.post('/login', params).then(

  • vue项目配置sass及引入外部scss文件方式

    目录 配置sass及引入外部scss文件 配置sass 引入外部scss文件 如果显示错误为如下图所示 记住此时需要重启项目 npm run dev 踩过的坑 Vue引入Sass文件 问题来了,为什么呢? 配置sass及引入外部scss文件 配置sass 安装对应依赖node模块 npm install node-sass --save-dev npm install sass-loader --save-dev 引入外部scss文件 在main.js中引入需要的scss文件 如果显示错误为如下

  • vue项目打包部署后默认路由不正确的解决方案

    目录 打包部署后默认路由不正确 问题描述 解决方案 vue打包后路径不对 对于背景图片不显示的问题 动画无法运行 小图标没了 打包部署后默认路由不正确 问题描述 vue项目本地开发的时候默认路由没问题,例如 redirect:"/index" 但是部署以后,服务器上默认路由不正确,现在遇到的问题是,会默认跳转到login页面,前提项目没有做路由权限. 解决方案 打开路由index.js文件,添加:base:"/" const routers = new Router

随机推荐