vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

vue中,我们所要实现的一个场景就是:

1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据,

2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经加载的数据和自动还原上次的浏览位置。

最近在项目中遇到这个问题,思考了几套方案,总是不太完善。百度搜到的方案也基本都只能满足一些很简单的需求。对于复杂一些的情况,还是有些不完善的地方。以下是个人对于这种场景的一个摸索,也参考了百度。如有更好的方案,欢迎指出。

  • 缓存组件,vue2中提供了keep-alive。首先在我们的app.vue中定义keep-alive:

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

这里是根据路由中的meta源信息中的keepAlive字段来判断当前路由组件是否需要缓存。这里的meta的keepAlive是我们自定义的,当然你也可以叫别的名字。

下面在router/index.js即我们的路由文件中,定义meta信息:

// list是我们的搜索结果页面
{      
    path: '/list',  
    name: 'List',      
    component: resolve => require(['@/pages/list'], resolve),    
    meta: {        
        isUseCache: false,  // 这个字段的意思稍后再说      
        keepAlive: true  // 通过此字段判断是否需要缓存当前组件  
    }    
},

上面的component: resolve => require(['@/pages/list'], resolve)这里的组件引入方式可能和大家平时写的有些不一样,这里是为了路由的懒加载用的,大家可以忽略。按照正常的import引入也可以,这个和本次的主题无关。如此一来,vue的路由会帮我们去缓存list页面。

  • 刷新数据or缓存数据的实现:

说这之前,先简单说一下和缓存相关的vue钩子函数。

设置了keepAlive缓存的组件:

       第一次进入:beforeRouterEnter ->created->…->activated->…->deactivated

       后续进入时:beforeRouterEnter ->activated->deactivated

可以看出,只有第一次进入该组件时,才会走created钩子,而需要缓存的组件中activated是每次都会走的钩子函数。所以,我们要在这个钩子里面去判断,当前组件是需要使用缓存的数据还是重新刷新获取数据。思路有了,下面我们来实现:

// list组价的activated钩子
 activated() {
    // isUseCache为false时才重新刷新获取数据
    // 因为对list使用keep-alive来缓存组件,所以默认是会使用缓存数据的         
    if(!this.$route.meta.isUseCache){            
        this.list = []; // 清空原有数据
        this.onLoad(); // 这是我们获取数据的函数
    } 
},

这里的isUseCache 其实就是我们用来判断是否需要使用缓存数据的字段,我们在list的路由的meta中已经默认设置为false,所以第一次进入list时是获取数据的。

当我们从详情页返回时,我们把list页面路由的isUseCache设置成true,这样我们在返回list页面时会使用缓存数据:

// 详情页面的beforeRouteLeave钩子函数
beforeRouteLeave (to, from, next) {        
    if (to.name == 'List') {
        to.meta.isUseCache = true;    
    }        
    next();
},

我们这里是在即将离开detail页面前判断是否返回的列表页。如果是返回list页面,则把list页面路由的isUseCache字段设置成true。为什么这样设置呢?因为我们对list组件使用的keep-alive进行缓存组件,其默认就是使用缓存的。而我们又在list组件的actived钩子函数中进行了判断:只有在list页面的isUseCache==false时才会清空原有数据并重新获取数据。所以此处设置isUseCache为true,此时返会list页面是不会重新获取数据的,而是使用的缓存数据。

detail返回list可以缓存数据了,那么search前往list页面时怎么让list页面不使用缓存数据而是获取新数据呢?我们重新回到list的activated钩子中:

// list组价的activated钩子
 activated() {
    // isUseCache为false时才重新刷新获取数据
    // 因为对list使用keep-alive来缓存组件,所以默认是会使用缓存数据的         
    if(!this.$route.meta.isUseCache){            
        this.list = []; // 清空原有数据
        this.onLoad(); // 这是我们获取数据的函数
        this.$route.meta.isUseCache = false;    } 
},

我们加了一行this.$route.meta.isUseCache=false;也就是从detail返回list后,将list的isUseCache字段为false,而从detail返回list前,我们设置了list的isUseCache为true。所以,只有从detail返回list才使用缓存数据,而其他页面进入list是重新刷新数据的。

至此,一个前进刷新、后退返回的功能基本完成了。

如果场景再复杂一丢丢,比如,如果这个详情页是个订单详情,那么在订单详情页可能会有删除订单的操作。那么删除订单操作后会返回订单列表页,是需要列表页重新刷新的。那么我们需要此时在订单详情页进行是否要刷新的判断。简单改造一下详情页:

data () {    
    return {
        isDel: false  // 是否进行了删除订单的操作       
    }
},
beforeRouteLeave (to, from, next) {        
    if (to.name == 'List') {
        // 根据是否删除了订单的状态,进行判断list是否需要使用缓存数据
        to.meta.isUseCache = !this.isDel;                
    }        
    next();    
},
methods: {        
    deleteOrder () {       
        // 这里是一些删除订单的操作

        // 将状态变为已删除订单
        // 所以beforeRouteLeave钩子中就会将list组件路由的isUseCache设置为false    
        // 所以此时再返回list时,list是会重新刷新数据的 
        this.isDel = true; 
        this.$router.go(-1)
    }
}

至此,算是解决了我的vue项目中的这个前进刷新、后退缓存数据和浏览位置的问题。

最后再提一下,页面滚动位置的问题。

问题1:我们知道,在vue这种单页应用中,如果你在a页面滚动了一段距离后,此时前往b页面后,b页面也会停留在a页面的滚动位置。这个问题的解决,我们可以利用router本身提供的功能来解决:

routes: [    
    {      
        path: '/detail',      
        name: 'Detail',      
        component: resolve => require(['@/pages/detail'], resolve)    
    }    
],
scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {        
          return savedPosition    
    } else {      
          if (from.meta.keepAlive) {        
               from.meta.savedPosition = document.body.scrollTop;      
          }        
          return { x: 0, y: to.meta.savedPosition || 0 }    
    }  
}

scrollBehavior是路由提供的基础功能,这段函数写的是:

1.如果通过浏览器自带的前进后退按钮切换的路由,那么会自动使用浏览默认的回滚上次页面的浏览位置。

2.如果是通过vue路由进行的页面切换。例如a前往b,首先判断a是不是通过keep-alive缓存的组件,如果是,则在a路由的meta中添加一个savedPosition字段,并且值为a的滚动位置。最后return的是页面需要回滚的位置。如此一来,如果打开一个页面,该页面的组件路由中meta.savedPosition为undefined的话,则页面滚动到(0,0)的位置,这样解决了问题1。那么如果打开一个页面,它的路由的meta.savedPosition有值的话,则滚动到上次浏览的位置,因为meta.savedPosition保存的就是上次浏览的位置。


如果觉得有帮助的话,就收藏一下吧!


作者:chinaBerg
链接:https://juejin.im/post/5b2ce07ce51d45588a7dbf76
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
### Vue3 中前进刷新后退时的页面缓存解决方案 #### 使用 `vcat-history` 插件 对于 Vue3 应用,推荐使用 `vcat-history` 轻量级插件来处理前进刷新后退时的页面缓存问题。该插件不仅支持 TypeScript Vue3,而且能够提供平滑的过渡动画效果[^1]。 ```bash npm install vcat-history ``` 安装完成后,在项目的入口文件中引入并配置: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import VCatHistory from 'vcat-history'; const app = createApp(App); app.use(VCatHistory, { cache: true, animation: true, }); app.mount('#app'); ``` #### 结合 `keep-alive` 组件优化缓存策略 为了更精细地控制哪些页面应该被缓存以及何时更新数据,可以在路由配置中结合 `keep-alive` 组件使用。这样不仅可以减少不必要的网络请求,还能提升用户体验。 定义需要缓存的视图组件: ```html <template> <div id="app"> <router-view v-slot="{ Component }"> <transition :name="$store.state.transitionName"> <component :is="Component" /> </transition> </router-view> </div> </template> <script setup lang="ts"> // ... </script> ``` 在路由配置里指定要缓存的具体路径: ```javascript { path: '/example', name: 'ExamplePage', component: ExampleComponent, meta: { keepAlive: true // 设置此属性表示允许缓存 } } ``` 当从详情页返回列表页时不希望加载新的数据,则可在目标组件内监听激活状态变化事件,并据此决定是否重载数据: ```typescript export default defineComponent({ data() { return { list: [], isUseCache: false, }; }, activated() { const fromRoute = this.$route.matched.find((record) => record.path === this.$route.meta.fromPath); if (fromRoute?.meta.noReload || !this.isUseCache) { this.list = []; this.fetchData(); } this.isUseCache = false; }, methods: { fetchData() { // 实现具体的数据拉取逻辑... }, }, }); ``` 针对某些特殊情况下的缓存失效现象(比如首次访问之后再次进入),可以通过检测当前实例的状态来进行适当调整。例如,在离开某个特定页面前保存其滚动位置或其他重要参数;下次再回到相同页面时恢复这些值以保持一致性的体验[^4]。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值