详解keep-alive+vuex让缓存的页面灵活起来资源-CSDN文库

76 浏览量 2020-10-17 03:35:36 上传评论收藏 72KB PDF 举报

资源推荐

资源详情

资源评论

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

主要介绍了keep-alive + vuex 让缓存的页面灵活起来，文中通过示例代码介绍的非常详细，对大家的学习或者

工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

引入

在使用vue + vue-router开发SPA的时候，有没有遇到过这样的情况：当我们在列表页和详情页之间切换的时候，如果列表页

不做缓存，会导致每次从详情页返回时，列表页都会重新加载。如下图：

细心的朋友已经发现了，当从详情页返回列表页的时候，列表页重载了，这样的体验显然不好，这时我们可以对列表页进行缓

存处理。

keep-alive实现页面缓存实现页面缓存

我们的项目不一定所有页面都需要做缓存处理，所以这里介绍两种按需缓存的方法：

方法一：

首先在定义路由的时候配置 meta 字段，自定义一个KeepAlive字段作为该页面是否缓存的标记：

routes:[{

path: '/search',

name: 'search',

component: search,

meta: {

title: '搜索列表页',

keepAlive: true // 标记列表页需要被缓存

}

},

{

path: '/detail',

name: 'detail',

component: detail,

meta: {

title: '详情页',

// 详情页不需要做缓存，所以不加keepAlive标记

}

}]

由于<keep-alive>组件不支持v-if指令，所以我们在App.vue中采用两个<router-view>的写法，通过当前路由的keepAlive字段

来判断是否对页面进行缓存：

<div id="app">

<keep-alive>

<router-view v-if="$route.meta.keepAlive" />

</keep-alive>

<router-view v-if="!$route.meta.keepAlive" />

</div>

方法二

使用<keep-alive>提供的 exclude 或者 include 选项，此处我们使用 exclude ，在App.vue中：

<div id="app">

<keep-alive exclude="detail">

<router-view />

</keep-alive>

</div>

需要注意的是，一定要给页面组件加上相应的name，例如在detail.vue中：

<script>

export default {

name: 'detail', // 这个name要和keep-alive中的exclude选项值一致

...

}

</script>

这么写就代表了在项目中除了name为detail的页面组件外，其余页面都将进行缓存。

特殊情况优化：特殊情况优化：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38614391

粉丝: 5
资源: 911

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip