欢迎来到 IT实训基地 - 科迅教育
咨询电话:400-836-0509
首页
就业真相
视频教程
项目实战
学员专访
技术交流
当前位置:
首页
技术交流
【科迅干货】vue-router 中使用 keep-alive 控制 ajax 请求的缓存策略
【科迅干货】vue-router 中使用 keep-alive 控制 ajax 请求的缓存策略
浏览量:433
类别:技术交流

1. 背景

vue 中有一个 keep-alive 的功能,可以将组件渲染结果缓存起来,结合 vue-router 中使用,可以缓存某个 view 的整个内容(比如列表页)。

通常会有这样的需求:

用户单击列表页(List)中某个标题,进入到详情页(Detail)。
此后会有两种情况返回到 List:

  1. 用户点击导航栏中的 /list 链接;

  2. 用户点击浏览器返回按钮 ←

情况 1 发生时,我们希望用户进入 List 后,页面的数据需要刷新。用户在导航切换时(点击导航菜单中的链接),其意愿是需要页面刷新,由于我们的应用是 SPA 应用,所以需要主动重新发送 ajax 请求获取数据,以让用户知晓,页面的数据有变化,否则他还要手动去点击浏览器的刷新按钮。

情况 2 发生时,我们希望用户进入 List 后,按照 h5 的行为自动将滚动条还原到原来位置,并且此时不应刷新页面数据,直接使用缓存。

2. 实践

需要缓存数据,那么在 app.vue 中的 router-view 配合使用 keep-alive :

2.1 使 router-view 结合 keep-alive

入口文件(app.vue):

//- app.vue <template>                                                              #app                                                                                   .page-header     .page-main                                                                      keep-alive             router-view(v-if="$route.meta.keep_alive")         router-view(v-if="!$route.meta.keep_alive")     .page-footer </template>

注: v-if 是加在 router-view 上,而不是加在 keep-alive 上。

2.2 配置路由

路由配置(router.coffee):

# router.coffee
router = new VueRouter(
    mode: 'history'  # 需要使用 h5 模式,才能使用 scrollBehavior

    routes: [
        {
                path: '/list'
                name: 'list'
                meta:
                    title: '列表页'
                    keep_alive: true  # true 表示需要使用缓存
                component: require('../views/list.vue')
         },
        ...
    ]

    scrollBehavior: (to, from, saved_position) ->
        # 保存到 meta 中,备用
        to.meta.saved_position = saved_position
        return saved_position ? {x: 0, y: 0}
)

注:

某一个 route 的 meta.keep_alive 值,设定之后就不能再修改其值,即不能动态变更 meta.keep_alive 的方式来动态控制是否使用缓存。

原因:某个 route.meta.keep_alive 初始设定为 true,会有以下两种情况:

若在 scrollBehavior 中判断出是情况 1,此时如果使用 to.meta.keep_alive = false 来禁用缓存,那么 app.vue 中的两个 router-view 会切换,之前缓存在 <keep-alive/> 中的第一个 router-view 的数据,会被 v-if 清空,导致缓存失效;

同理,当判断出是情况 2,如果 to.meta.keep_alive = true 来开启缓存,此时又会发生一次切换,导致重新生成组件。故 route.meta.keep_alive 一旦设定,就表示此组件一定是需要缓存的,后期不能改变其值。

3. keep-alive 下控制数据刷新

既然不能改变 meta.keep_alive 的值,那么如果做到在 keep-alive 包裹内的组件进行数据刷新呢?

答案是:使用 vue-router 中的 beforeRouteEnter 钩子。

这里不能使用 vue 文档中的 mounted、updated 等生命周期中的钩子函数,因为在使用 keep-alive 后,这些钩子,统统不会被调用。

而在 vue-router 中提供了 beforeRouteEnter 钩子此钩子与 keep-alive 无关,不会像 mounted 等内置钩子那样被 keep-alive “吃掉”。

# list.coffee
export default List =
    name: 'List'
                                                                                  
    data: ->
        lists: []
               
    beforeRouteEnter: (to, from, next) ->
        next (vm) ->
            # 如果 saved_position === null,那么说明是点击了导航链接(情况1),
            # 此时需要刷新数据,获取新的列表内容。
            # 否则什么也不做,直接使用 keep-alive 中的缓存。
            if to.meta.saved_position is null
                vm.fetchLists()

    methods:
        fetchLists: ->
            @$store
                .dispatch(types.dashboard.actions.GET_LISTS)
                .then (res) =>
                    if res.status == 'success'
                        @posts = res.data
                    else
                        @posts_loading_error_message = res.data.msg

注: 注意 beforeRouteEnter 中使用的是 is null,而不是 if to.meta.saved_position?。

一点说明:

is null 相当于 === null;
to.meta.saved_position? 相当于 to.meta.saved_position == null。

undefined == null 为 true,但 undefined === null 为 false。

这一点很重要,因为在调试过程中,如果你在 beforeRouteEnter 的 next 方法中:
console.log to.meta.saved_position

当点击的是导航链接(情况 1),此时输出 null,因为 scrollBehavior 中的 saved_position 为 null。

这里显示相关代码:

// src/util/scroll.js#L40// wait until re-render finishes before scrollingrouter.app.$nextTick(() => {
    let position = getScrollPosition()
    const shouldScroll = behavior(to, from, isPop ? position : null)

可以看出   isPop ? position : null 当点击导航链接(情况 1, isPop == false)时,传递的是 null。

其中 isPop 可以理解为是否是点击了浏览器后退按钮。点击了就传递 position,否则传递 null。

那么什么时候会出现 undefined 的情况呢?

上面代码中的 position = getScrollPosition(),其 源码 如下:

function getScrollPosition (): ?Object {
    const key = getStateKey()
    if (key) {
        return positionStore[key]
    }}

其中 positionStore 的值由 函数 saveScrollPosition 保存。
如果找到了 key 就返回,此时为形如 {x: 33, y: 12} 的值,表示之前横纵滚动条的位置。
如果没有找到 key,此函数没有返回任何内容,那么自然是返回 undefined 了。

77
南京校区:南京市建邺区新城科技园广聚路33号安科大厦4楼
18724002960
南通校区:南通市崇川区人民中路23号新亚大厦3楼
13626271253
上海校区:筹建中...
敬请期待
全国咨询电话
400-836-0509
周一至周日   08:30-21:30
关注免费学习
苏ICP备15009282号     科迅教育版权所有     Copyright 2008 -
领取学习视频资料
限前100名
您好,您想咨询哪门课程呢?