Vue缓存页面内容及路由跳转前的页面滚动位置

开发中有些业务场景组件数据是不用刷新的,我将这些常用数据比作我们开发语言中的常量,一般情况下是不做改变的,也不用重新做接口请求,这里就是记载Vue中我们如何缓存组件数据以及它的生命周期

首先我们前端都知道SPA应用——单页面应用程序,

是有一个入口文件的,在Vue中的页面模板入口是一个App.vue文件,这个文件是相当于我们传统布局最外层的DIV。

<template>
  <div id="app">
   <!-- name名为includes含有的组件会被缓存起来,excludes含有的组件将不会被缓存,并且include和exclude这两个属性的值支持以逗号间隔的方式绑定多个组件的名称或者数组的形式来绑定名称,includes为字符串和数组表示的区别 :为空字符串时,代表被keep-alive包裹的组件都缓存;为空数组时,代表不缓存被keep-alive包裹的组件-->
     <keep-alive v-if="KeepAlive" :include="includes" :exclude="excludes">
       <router-view></router-view>
     </keep-alive>
     <router-view v-else></router-view>
  </div>
</template>

这里根据业务需求决定KeepAlive的bol变量值,是否缓存跳转后的路由组件内容,而includes数组的值一开始存到vuex的store仓库state中并命名为cacheArr空数组,根据业务需求动态更改store仓库中存储的缓存数组组件变量cacheArr并在使用keepalive的组件中使用watch监听路由的变更,来实时更改includes变量,这样一来我们就可以动态缓存以及删除缓存组件的数据了

这里给大家转载一些更加详细的应用案例博客地址

https://blog.csdn.net/Liu_yunzhao/article/details/102821321

https://blog.csdn.net/qq_35728290/article/details/83006577

https://segmentfault.com/a/1190000018705351

那么如何缓存页面路由跳转前的滚动位置呢?

这里介绍vue-router中配置路由文件有两个模式:hash模式(默认模式)和history模式,

默认模式启动的服务地址栏是这样的

http://localhost:8080/#/

可以看到地址栏会带上#,若想不展示则修改路由文件的配置项mode属性值

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

Vue中的history模式原理是根据H5的history来的,所以可以记录页面的滚动位置并且提供了相应的配置项,在routes数组后面加上scrollBehavior函数

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      /* 根据路由元信息详细控制滚动位置 */
      const position = {}
      // 若存在锚点,则跳转锚点位置
      if (to.hash) {
        position.selector = to.hash;
      }
      // 若果meta中存在scrolltop属性并且为true,则默认跳转时滚动到顶部
      if (to.matched.some(m => m.meta.scrollToTop)) {
        position.x = 0;
        position.y = 0;
      }
      // 若是需要缓存的组件,则将当前窗口的滚动位置保存到路由元信息中
      if (from.meta.KeepAlive) {
        from.meta.savedPosition = document.body.scrollTop;
      }
      return position;
    }
  }

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3中,可以通过使用keep-alive组件和导航钩子函数来实现路由跳页面数据缓存。首先,在路由中设置需要缓存页面,并使用keep-alive组件将其包裹起来。可以使用v-if指令来判断哪些页面需要缓存,为true的是需要缓存的,false是不需要缓存的。这是第一步。 然后,在需要缓存页面设置导航钩子函数beforeRouteUpdate。这个钩子函数可以在每次路由更新之执行,并在回调中执行需要数据更新的业务逻辑。例如,可以在这里重新发送分类数据接口请求,以更新页面数据。 综上所述,以上是实现Vue3路由跳页面数据缓存的方法。通过使用keep-alive组件和导航钩子函数,可以在页面之间实现数据的缓存和更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue页面实现页面缓存操作](https://download.csdn.net/download/weixin_38673924/13128304)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue3-解决路由缓存问题-方案一:使用key;方案二:使用onBeforeRouteUpdate](https://blog.csdn.net/qq_45811054/article/details/130948701)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杀猪刀-墨林

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值