vue 路由按需 keep-alive

时间 2019-11-05 标签 vue 路由按需 alive

situation

一个常见的的场景，html

主页 -->前进列表页-->前进详情页，详情页 -->返回主页 -->返回列表页vue

咱们但愿，git

从详情页 -->返回列表页的时候页面的状态是缓存，不用从新请求数据，提高用户体验。程序员

从列表页 -->返回主页的时候页面，注销掉列表页，以在进入不一样的列表页的时候，获取最新的数据。github

task

今天让咱们来实现这个需求。编程

在代码的世界里解决问题的方法历来都不止一种。api

好比，从数组中找到一个的值索引：数组

能够用最基础的 for循环遍历，也能够用indexOf这种工具函数，还能够用findIndex forEach等更语义化的高阶函数来遍历。缓存

我参考了大量的文章，爬了官方的文档，以后，找到了好几种办法，下面，让咱们来一个个分析。ruby

let's begin ，咱们开始吧。🙌

解决掉提需求的人

😂 emm... ，相对于咱们的人生，可能代码会更好掌控吧。

程序员活在本身想象的王国里

我刚接触电脑就发现电脑的妙处，电脑远没有人那么复杂。若是你的程序写得好，你就能够和电脑处好关系，就能够指挥电脑干你想干的事。这个时候你是十足的主宰。往往你坐在电脑面前，你就是在你的王国里巡行，这样的日子简直就是天堂般的日子。电脑里的世界很大，编程人是活在本身想象的王国里。你能够想象到电脑里细微到每个字节、每个比特的东西。

-- 雷军(没错就是小米那个雷军)

我很认同雷军的说法，

人生能找到一个热爱的东西很可贵，你热爱代码并专一于它的话，

终有一天，

它会以各类各样的方式回报给你：工资，认同感，成就感，和你一块儿进步，内心共鸣的人。

你若怒放，蝴蝶自来。诸君共勉 (能骗一个相信，就少一个沙雕和我抢妹子🤣)

睡服♂提需求的人

😂emm..., 看着镜子里那张的脸，这辈子应该是没办法从脸上获得任何的便利了...

keep-alive

keep-alive是Vue提供的一个抽象组件，主要用于保留组件状态或避免从新渲染。

可是 keep-alive会把其包裹的全部组件都缓存起来。

action

咱们把需求分解成2步来实现

1.把须要缓存和不须要缓存的视图组件区分开

思路以下图:

写2个 router-view 出口

<keep-alive>
    <!-- 须要缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 不须要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
复制代码

在Router里定义好须要缓存的视图组件

new Router({
    routes: [
        {
            path: '/',
            name: 'index',
            component: () => import('./views/keep-alive/index.vue'),
            meta: {
                deepth: 0.5
            }
        },
        {
            path: '/list',
            name: 'list',
            component: () => import('./views/keep-alive/list.vue'),
            meta: {
                deepth: 1
                keepAlive: true //须要被缓存
            }
        },
        {
            path: '/detail',
            name: 'detail',
            component: () => import('./views/keep-alive/detail.vue'),
            meta: {
                deepth: 2
            }
        }
    ]
})
复制代码

2.按需keep-alive

咱们从官方文档提供的api入手,

keep-alive组件若是设置了 include ，就只有和 include 匹配的组件会被缓存，

因此思路就是，动态修改 include 数组来实现按需缓存。

<keep-alive :include="include">
    <!-- 须要缓存的视图组件 -->
  <router-view v-if="$route.meta.keepAlive">
  </router-view>
</keep-alive>

<!-- 不须要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive">
</router-view>
复制代码

让咱们在app.vue里监听路由的变化,

export default {
  name: "app",
  data: () => ({
    include: []
  }),
  watch: {
    $route(to, from) {
      //若是 要 to(进入) 的页面是须要 keepAlive 缓存的，把 name push 进 include数组
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      //若是 要 form(离开) 的页面是 keepAlive缓存的，
      //再根据 deepth 来判断是前进仍是后退
      //若是是后退
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        var index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
    }
  }
};
复制代码

须要注意的是

keep-alive须要其包裹的组件有name属性，

咱们上面的代码中的 push 和 splice 的是 router 的 name。

因此建议你们把 route 的 name属性设置和 route对应component的name设成同样的。

result

让咱们验证一下咱们的成果

在 vue-devtool 里，灰色的组件，表明是缓存状态的组件，注意观察list的变化。

写在最后

实现按需 keep-alive ，网上有方法，经过修改 route 配置里的 meta里的 keepAlive 值来实现。

直接修改 meta 的值，可能会出现上图的状况，keep-alive里有一直有一个缓存的 list,正常的 rotuer-view 里也有一个,

复现这个问题须要很长得篇幅，感兴趣的朋友能够本身去爬一下坑。

还有得方法是经过在keep-alive 的视图组件在退出 rotuer 的时候，调用this.$destory() 直接摧毁组件，这会致使组件无法在缓存，这个bug ，在官方issue有提到。

参考资料

官方issue

Vue项目全局配置页面缓存，实现按需读取缓存

关于动画

谢谢你们的点赞和回复，我看好多人想要demo的源码这里分享一下。

由于我公司目前尚未,vue的项目给我施展拳脚。我当时写demo的时候，想的也不是动画方面的封装和优化，

因此分享的demo里的代码里，关于动画，会有不少重复的代码和丑陋的实现。还请多见谅

源码连接

关于demo动画的一些分析，能够看个人前2篇文章

vue 路由 按需 keep-alive