vue如何使用router.meta.keepAlive对页面进行缓存

使用router.meta.keepAlive对页面进行缓存

需求：

1. 从stockList页面到stockInfo页面，从stockInfo页面返回stockList，缓存stockList页面           

2. 从其他页面进入到stockList页面，则不缓存stockList页面

路由配置文件中：

{
 path: '/stockSelectionAndDiagnosticStocks',
 name: 'stockSelectionAndDiagnosticStocks',
 component: stockSelectionAndDiagnosticStocks,
 redirect: '/stockSelectionAndDiagnosticStocks/stockList',
 children: [
   {
     path: '/stockSelectionAndDiagnosticStocks/stockList',
     name: 'stockList',
     component: stockList,
     // 此处设置的原因：保证第一次从stockList进入到stockInfo中是缓存了的
     meta: { keepAlive: true }
   },
   {
     path: '/stockSelectionAndDiagnosticStocks/stockInfo',
     name: 'stockInfo',
     component: stockInfo
   }
 ]
}

App.vue中：

<div id="app">
 <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

stockList.vue中：

beforeRouteLeave (to, from, next) {
 // 从列表页去到别的页面，如果不是详情页，则不缓存列表页
 if (to.name !== 'stockInfo') {
   this.$route.meta.keepAlive = false
 } else {
   this.$route.meta.keepAlive = true
 }
 next()
}

*** 增加需求：从stockInfo页面通过&ldquo;特殊的&rdquo;点击事件回到stockList，stockList页面的列表需要按照字段更新 *** stockInfo.vue中：（其中setStore、getStore是封装的sessionStorage）

clickHistoryItem (val) {
 setStore('searchName', val)
 this.$router.push({ name: 'stockList' })
}

stockList.vue中：

// 只有当缓存的情况写才触发这两个钩子函数
activated () {
 if (getStore('searchName')) {
   this.pageIndex = 1
   this.searchStockFirstStep(getStore('searchName'))
 }
},
deactivated () {
 removeStore('searchName')
}

使用keepAlive缓存页面及记忆上次浏览位置，并刷新页面

平时业务开发中，列表页面是很常见的，而列表页面有一个很常见的需求就是要缓存整个页面，而且还要记住列表的滚动位置，当点击某个列表项进入详情页，再返回到列表页面的时候，要能够回到原来的滚动位置。

上面的需求我相信业务开发人员基本都碰到过，那么在 vue 中，这个需求要怎么实现呢，这票文章就来说一下，在实现这个功能的过程中，还有几个需要注意的点后面也会说到。

一、用keep-alive实现路由缓存

在 vue 项目中，要想实现缓存功能，有一个很简单方便的方法就是使用 keep-alive 组件，keep-alive 可以实现组件或路由级的缓存，这里就以路由缓存为例来说下。

1，在 App.vue 中的路由组件 router-view 上加上 keep-alive

像页面缓存这种功能，在一个应用中可能会有的页面不需要，而有的页面又需要，所以就需要将这功能放在全局，并做成可配置的，这样才能进行灵活配置。

而整个项目的所有页面其实都是挂在 app 这个节点下，通过 router-view 加载和显示出来的。所以我们在 app.vue 这个文件这里给 router-view 加上 keep-alive。

? ? <!--缓存想要缓存的页面，实现后退不刷新-->
? ? <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
? ? ? <keep-alive>
? ? ? ? <router-view v-if="$route.meta.keepAlive"></router-view>
? ? ? </keep-alive>
? ? ? <router-view v-if="!$route.meta.keepAlive"></router-view>
? </div>

• 注意点一：用 keep-alive 包裹需要缓存的路由，但是判断条件不要写在 keep-alive 上，需要写在 router-view 上，不然会没有作用

• 注意点二：当 router-view 有 transition 过渡动画时的写法。

如果需要自定义路由的切换过渡动画，那么就需要在 router-view 上加上 transition 组件，当加上 transition 之后，HTML 层级就达到了 * ，然后 transition ，keep-alive ，router-view ，v-if 这几者之间可以有多种不同的组合，在尝试了各种不同的组合之后，我发现只有一种写法可以达到缓存效果，但也有一点小瑕疵，那就是缓存的页面不会触发过渡动画，这也是一个比较遗憾的地方。代码如下：

<div id="app" class="main-app">
? ? <!--缓存想要缓存的页面，实现后退不刷新-->
? ? <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
? ? <!--keepAlive 的路由不会触发 transition，参见 ?? ??? ??? ??? ??? ? ? https://github.com/vuejs/vue-router/issues/811 -->
? ? <transition name='fade' mode="out-in">
? ? ? <keep-alive>
? ? ? ? <router-view v-if="$route.meta.keepAlive"></router-view>
? ? ? </keep-alive>
? ? </transition>
? ? <transition name='fade' mode="out-in">
? ? ? <router-view v-if="!$route.meta.keepAlive"></router-view>
? ? </transition>
? </div>

2，在 router.js 中为需要缓存的路由设置缓存参数

在上面的代码中，有一个判断条件 $route.meta.keepAlive ，这个条件就是用来区分该路由是否需要缓存的，这个条件需要写在 router.js 路由表文件中。

{path: ‘/msg', name: ‘Message', meta: {keepAlive: true}, component: Message},

如上，就是在需要缓存的路由里面，给该路由加上 meta 元信息，在里面设置是否需要缓存即可。

二、记录页面滚动位置

要记住滚动位置，有多种实现方式，然而最简单，最便捷的方式就是在路由表中加上 scrollBehavior，这也是官方推荐的方式。

new Router({
? ? mode: 'history',
? ? scrollBehavior (to, from, savedPosition) {
? ? ? if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
? ? ? ? return savedPosition
? ? ? } else {
? ? ? ? return {x: 0, y: 0}//savedPosition也是一个记录x轴和y轴位置的对象
? ? ? }
? ? },
? ? routes: []
?})

只要在 router.js 中加入如上的 scrollBehavior 那段代码，就可以实现 router-view 的记录滚动位置的功能了，这功能是 vue 内封装的，用起来简单方便。

做完上面两步就可以实现简单的页面缓存和记住滚动位置的功能了，但是真正用起来却发现仅仅是这样还是不够的。按照上面的代码缓存功能是实现了，但是你会发现，被缓存的页面不会再重新请求数据了（没有做下拉刷新等操作的时候），这样其实是不太好的，其实我们大多数时候需要的是从列表详情页回到列表的时候不刷新，但是从其他页面进入列表页的时候需要重新请求数据。那么要怎么实现这么个功能呢？

三、详情页返回列表页不刷新，其他页面进入列表页刷新

在前面的代码中，我们实现了路由级的页面缓存，也记住了页面滚动位置，但同时也发现被缓存的页面不会再重新请求数据，这样也是不行的，我们现在就来解决这个问题。

要解决这个问题，首先需要用到 vue 的生命周期和路由钩子的相关知识点。因为我们这里使用了 keep-alive 组件来做缓存，所以生命周期等钩子函数的执行顺序就有了两种情况。

不使用 keep-alive 时

beforeRouteEnter --> created --> mounted --> destroyed

使用 keep-alive 时

beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。

基于上面的两点，我们就可以解决被缓存的页面一直不刷新的问题了。

1，在路由的 mate 中添加一个变量，表示是否需要刷新

{path: ‘/msg', name: ‘Message', meta: {keepAlive: true, isNeedRefresh: true}, component: Message},

2，在页面组件的 data 中定义一个变量，表示是否是第一次进入该页面

data () {
? ? ? return {
? ? ? ? isFirstEnter: false,
? ? ? }
? ? },

3，在相关的钩子函数中判断是否是第一次进入页面，是否需要重新加载数据

beforeRouteEnter (to, from, next) {
? ? ? // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
? ? ? // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
? ? ? if (from.name === 'MsgDetail') {
? ? ? ? to.meta.isNeedRefresh = false
? ? ? }
? ? ? next()
? ? },
? ? mounted () {
? ? ? // 只有第一次进入或者刷新页面后才会执行此钩子函数,使用keep-alive后（2+次）进入不会再执行此钩子函数
? ? ? // isFirstEnter 用来标记是否第一次进入该页面，以防止用户在详情页手动刷新页面，回到该页面后不再请求数据
? ? ? this.isFirstEnter = true
? ? },
? ? activated () {
? ? ? if (this.$route.meta.isNeedRefresh || this.isFirstEnter) {
? ? ? ? // 如果 isNeedRefresh 是 true，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
? ? ? ? this.queryListData()
? ? ? }
? ? ? // 恢复成默认的 false，避免 isFirstEnter 一直是 true，导致重复获取数据
? ? ? this.isFirstEnter = false
? ? ? // 恢复成默认的 true，避免 isNeedRefresh 一直是 false，导致下次无法获取数据
? ? ? this.$route.meta.isNeedRefresh = true
? ? },

这里面的判断逻辑有点小绕，需要好好理解下。

完成上面的代码也就可以实现从详情页返回不刷新，自动滚动到原先的位置，而从其他页面进入则重新获取数据的需求。

四、返回记录位置的页面需要进行刷新数据

凡是被keep-alive包裹住的页面都会被缓存，如果想刷新内容要启用activated函数，用法同created，activated只有在被keep-alive包裹时会触发，activated函数一进入页面就触发

activated(){
? ? //返回页面时刷新数据，需要重新请求的写在这里
? ? this.getParkList();
? },

五、额外需要注意的地方（没测）

1，keep-alive 与 lazyload 同时使用时要注意

这个问题是我偶尔发现的，有时候会发现使用了 lazyload 加载的图片有时会显示不正确，刷新下就又正常了。这其实是 lazyload 导致的问题，当单独操作一二个数据添加或删除的时候，lazyload 会导致图片的显示位置错乱，我还没找到很好的处理办法，只有先暂时去掉 lazyload。如果有更好的处理方式，烦请告知。

2，要注意页面布局，不要限制页面滚动位置

在使用了 keep-alive 做路由级缓存的页面，不要限定页面的滚动位置，让页面能够自然滚动就行，不要给滚动区域设置固定高度。设置了固定高度的话，记录滚动位置的功能就会不起作用，缓存功能是还在，但是并不会自动记住滚动位置。

来源：https://blog.csdn.net/qq_42127308/article/details/94445321