在项目中经常会遇到需要设置部分页面缓存,在路由切换时,不必每次都拉取接口更新,这样可以很大程度的提升用户体验,也可以减少接口请求次数,降低服务器消耗;
首先我们先了解下vue这个框架在页面缓存知识
1:keep-alive 组件; 说明: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们;|- include 属性 说明: 只要include包含组件name则缓存下来;官方解释:允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示|- exclude 属性 说明: 只要exclude包含组件name则不缓存下来; 官方解释:组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示2: 路由配置参数中的 scrollBehavior 滚动行为,主要记录滚动位置的,我们不仅可以利用来记录缓存页面滚动的位置,还可以利用 savedPosition 知道页面到底是前进 还是 后退const RouterConfig = {mode: "hash", //hash historyroutes: Routers,scrollBehavior: function (to, from, savedPosition) {// console.log(to) // to:要进入的目标路由对象,到哪里去// console.log(from) // from:离开的路由对象,哪里来// console.log(savedPosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}// 从第二页返回首页时savedPosition为undefinedif (savedPosition || typeof savedPosition === 'undefined') //后退{//后退滚动到上一次位置if (savedPosition) { return savedPosition }} else { //前进//前进滚动到顶部return {x:0,y:0}}}} 3:vue 生命周期 中的 2个钩子 activated 和 deactivatedactivatedkeep-alive 组件激活时调用 下面简单讲解下,建议看vue官方文档细致了解下deactivated keep-alive 组件停用时调用 下面简单讲解下,建议看vue官方文档细致了解下啥意思呢?如果不使用 keep-alive,我们经常在 created 中执行页面打开前的动作,比如:ajax获取数据;不使用 keep-alive 打开页面 执行 created使用 keep-alive 打开页面 执行 created 之后又会执行 activated ,如果此时返回上一页(就是缓存的页面)那么只执行 activated再解释下: 就是使用了 keep-alive 打开新页面会执行 created+activated 2个钩子 ,如果返回到缓存的页面,此时缓存页面不执行 created了,如果此时你业务需要返回 alert(1),那么这个 alert(1),只能放在activated中,放在created中无效;
下面介绍一下我在项目中用到的添加页面缓存的方法;
1.路由文件
//router/index.jsconst routes = [{path: "/",name: "home",component: Home},{path: "/card-goods-index",name: "card-goods-index",component: () => import("@/views/card-goods/card-list.vue"),meta: {title: "首页",index: 1}},{path: "/card-package-index",name: "card-package-index",component: () => import("@/views/card-goods/card-package.vue"),meta: {title: "卡券包",index: 2}}]
2.app.vue
<!--app.vue--><template><div id="app"><transition :name="transitionName"><keep-alive :include="cachedViews" :exclude="normalViews"><router-view :key="1" /></keep-alive></transition></div></template><script>export default {name: "App",data() {return {url: "",transitionName: "", // 默认动画cachedViews: ["card-goods-index"], // 需要缓存的页面数组normalViews: [] // 不需要缓存的页面数组};},watch: {$route(to, from) {// 将其他页面添加到缓存if (!this.cachedViews.includes(to.name) &&!this.normalViews.includes(to.name)) {this.cachedViews.push(to.name);}}}};</script><style></style>
3.card-goods-index.vue
<!--card-goods-index.vue--><template><div class="main-content"><!--card-goods-index.vue--></div></template><script>export default {name: "card-goods-index",data() {return {url: "",};}};</script><style></style>
这个地方一定要注意,需要缓存的组件一定要设置name属性,并且要和router中组件的name和app.vue中需要缓存素组内的name保持一致才能生效。