巧用 Vue 实现刷新控制，前进刷新、后退不刷新！

见解分享

2023-12-12 09:19:42

在这个瞬息万变的互联网时代，网站和应用程序的用户体验至关重要。用户期望网站快速响应、流畅无阻，任何延时或中断都会让他们感到沮丧，甚至导致他们离开您的网站。

在 Vue 中实现前进刷新、后退不刷新的效果，可以提高用户体验，让用户在浏览过程中更加舒适和便捷。

理解基本概念

浏览器缓存

浏览器缓存是一种临时存储机制，它将最近请求过的资源存储在本地，以便在用户再次请求时可以快速提供。这可以显着提高网站的性能，尤其是在用户访问大量静态资源（如图像、CSS 和 JavaScript 文件）时。

Vue 组件的生命周期

Vue 组件的生命周期是一系列钩子函数，它们允许您在组件的不同阶段执行特定的操作。这些钩子函数包括：

beforeCreate: 在组件创建之前调用。
created: 在组件创建之后调用。
beforeMount: 在组件挂载到 DOM 之前调用。
mounted: 在组件挂载到 DOM 之后调用。
beforeUpdate: 在组件更新之前调用。
updated: 在组件更新之后调用。
beforeDestroy: 在组件销毁之前调用。
destroyed: 在组件销毁之后调用。

实现前进刷新、后退不刷新的效果

现在，我们了解了浏览器缓存和 Vue 组件的生命周期，就可以开始实现前进刷新、后退不刷新的效果了。

1. 在列表页组件中使用 `beforeRouteUpdate` 钩子函数

export default {
  beforeRouteUpdate(to, from, next) {
    // 如果是从详情页返回，则不刷新列表页
    if (from.name === 'detail') {
      next(false);
    } else {
      // 否则，刷新列表页
      next();
    }
  },
};

2. 在详情页组件中使用 `beforeRouteLeave` 钩子函数

export default {
  beforeRouteLeave(to, from, next) {
    // 从详情页离开时，将列表页标记为需要刷新
    this.$root.$emit('needRefresh');
    next();
  },
};

3. 在根组件中使用 `needRefresh` 事件监听器

export default {
  data() {
    return {
      needRefresh: false,
    };
  },
  methods: {
    handleNeedRefresh() {
      this.needRefresh = true;
    },
  },
  watch: {
    needRefresh(newVal) {
      if (newVal) {
        // 列表页需要刷新，则刷新列表页
        this.$refs.list.refresh();
        this.needRefresh = false;
      }
    },
  },
};

4. 在列表页组件中使用 `refresh` 方法

export default {
  methods: {
    refresh() {
      // 刷新列表页数据
      this.$refs.table.refresh();
    },
  },
};

完整示例代码

// 列表页组件
export default {
  beforeRouteUpdate(to, from, next) {
    // 如果是从详情页返回，则不刷新列表页
    if (from.name === 'detail') {
      next(false);
    } else {
      // 否则，刷新列表页
      next();
    }
  },
  methods: {
    refresh() {
      // 刷新列表页数据
      this.$refs.table.refresh();
    },
  },
};

// 详情页组件
export default {
  beforeRouteLeave(to, from, next) {
    // 从详情页离开时，将列表页标记为需要刷新
    this.$root.$emit('needRefresh');
    next();
  },
};

// 根组件
export default {
  data() {
    return {
      needRefresh: false,
    };
  },
  methods: {
    handleNeedRefresh() {
      this.needRefresh = true;
    },
  },
  watch: {
    needRefresh(newVal) {
      if (newVal) {
        // 列表页需要刷新，则刷新列表页
        this.$refs.list.refresh();
        this.needRefresh = false;
      }
    },
  },
};