vue实现前进刷新后退不刷新效果

github源码地址:https://github.com/ichanghe/keep_alive

欢迎star


目标:

  1. 在页面中,第一次进入的时候,请求获取数据。
  2. 点击某个子页面,跳到相应页面,再从详情页后退回到列表页时,不刷新数据。

可以理解为 a->b->c ,

  • a进入b页面查询数据,
  • b进入c页面查询数据,
  • c进入b页面读缓存
  • b进入a页面读缓存

 方法实现:

在 App.vue设置:

<template>
  <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>
</template>
export default new Router({
  mode: "hash",
  routes: [
    {
      path: "/",
      name: "A",
      component: Apage,
      meta:{
        keepAlive: true,
        useCache:false
      }
    },
    {
      path: "/bpage",
      name: "B",
      component: Bpage,
      meta: {
        keepAlive: true,
        useCache:false
      }
    },
    {
      path: "/cpage",
      name: "C",
      component: Cpage,
      meta:{
        keepAlive: true,
        useCache:false
      }
    }
  ]
});

在a页面使用activated 和 beforeRouteEnter钩子函数,当页面从b或c页面进入,就读内存;如果不是就加载数据

  activated() { 
    if(!this.$route.meta.useCache){
      this.onLoad(); // 这是我们获取数据的函数
    }else{
      console.log('此时我们读缓存')
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'B'||from.name === 'C') {
      //判断是从哪个路由过来的,若是detail页面不需要刷新获取新数据,直接用之前缓存的数据即可
      to.meta.useCache = true
    }
    next()
  },

在b页面分别使用activated 和 beforeRouteEnter钩子函数,判断是从a页面进入,会调用this.onLoad方法;从c页面进入,读缓存

  activated() { 
    if(!this.$route.meta.useCache){
      this.onLoad(); // 这是我们获取数据的函数
    }else{
      console.log('此时我们读缓存')
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'C') {
      //判断是从哪个路由过来的,若是detail页面不需要刷新获取新数据,直接用之前缓存的数据即可
      to.meta.useCache = true
    }
    next()
  },

在c页面使用activated,因为只有c页面永远需要查询数据

  activated() {      
    this.onLoad(); // 这是我们获取数据的函数
  },

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现后退刷新前进刷新的方法有很多种,其中一种比较常用的方法是使用Vue Router中的导航守卫(Navigation Guards)。 具体实现方法如下: 1. 在Vue Router中定义路由时,给需要实现后退刷新前进刷新的路由添加 meta 属性,例如: ``` { path: '/home', name: 'home', component: Home, meta: { keepAlive: true } } ``` 2. 在 Vue 中添加导航守卫,根据 meta 属性的值设置路由的缓存状态。例如: ``` router.beforeEach((to, from, next) => { if (to.meta.keepAlive) { // 如果需要缓存,则将路由设置为缓存状态 to.meta.isKeepAlive = true; } else { // 否则不缓存 to.meta.isKeepAlive = false; } next(); }); router.afterEach((to, from) => { // 根据路由的缓存状态设置页面是否缓存 if (from.meta.isKeepAlive && !to.meta.isKeepAlive) { // 如果从缓存页跳转到非缓存页,则销毁缓存页 from.meta.keepAlive = false; from.meta.isKeepAlive = false; } else if (!from.meta.isKeepAlive && to.meta.isKeepAlive) { // 如果从非缓存页跳转到缓存页,则缓存页不刷新 to.meta.keepAlive = true; to.meta.isKeepAlive = true; } else { // 其他情况下,刷新页面 location.reload(); } }); ``` 通过上述方法,我们可以在 Vue实现后退刷新前进刷新效果。当从缓存页跳转到非缓存页时,缓存页将被销毁,避免了内存泄漏;当从非缓存页跳转到缓存页时,缓存页不会刷新,提高了页面的性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值