Vue.js 清除页面缓存的方法

在 Vue.js 开发中，有时候我们需要在页面更新时清除缓存，以确保用户能够看到最新的数据或者 UI 变化。本文将介绍几种常见的方法来清除 Vue 页面的缓存。

方法一：通过修改 URL 实现缓存清除

一种简单的方法是通过修改页面的 URL 来清除缓存。我们可以在页面跳转或者刷新时，添加一个随机的查询参数或者时间戳作为 URL 的一部分。这样，每次 URL 发生变化时，浏览器会重新请求页面，从而达到清除缓存的效果。

下面是一个示例代码：

<template>
  <div>
    <button @click="refreshPage">刷新页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    refreshPage() {
      window.location.href = `${window.location.origin}${window.location.pathname}?${Date.now()}`;
    }
  }
}
</script>

在上述示例中，我们通过点击按钮来触发 refreshPage 方法，该方法会将当前页面的 URL 修改为包含当前时间戳的新 URL。这样就能够清除页面缓存并重新加载页面。

方法二：使用 Vue Router 的导航守卫

如果你在项目中使用了 Vue Router，你可以利用导航守卫来清除页面缓存。具体来说，你可以在导航守卫的 beforeEach 钩子函数中执行一些操作，以确保每次路由切换时都清除缓存。