路由变化触发刷新用代码实现怎么做

在单页应用(Single Page Application, SPA)中，当路由发生变化时，通常我们会主动清空或更新浏览器缓存，以确保用户看到的是最新的页面内容。以下是使用JavaScript的一个常见做法，以Vue.js为例：

1. **使用Vuex状态管理库**：
如果你在项目中使用了Vuex，可以在路由切换时更新store中的状态，并监听`beforeRouteUpdate`事件，该事件会在当前路由组件已经渲染并接收到新的`to`和`from`参数之后调用。在这个时候，你可以更新对应的缓存数据。

import { mapActions } from 'vuex';

export default {
  beforeRouteUpdate(to, from, next) {
    // 根据路由变化，执行刷新操作，如更新store内的数据
    this.$store.dispatch('yourAction', { /* 更新的数据 */ });

    // 清除旧路由的缓存数据
    window.location.reload(false); // false参数表示不清除sessionStorage

    next();
  }
};

2. **使用History API**：
使用`history.pushState()`和`popstate`事件，可以模拟地址栏的变化而不刷新页面。然后在`popstate`事件处理程序中，清理缓存或执行其他刷新操作。

window.addEventListener('popstate', () => {
  // 清理缓存或其他刷新操作
  localStorage.removeItem('yourKey');
});

// 当路由改变时
this.$router.push({ name: 'yourRoute' }).then(() => {
  history.replaceState({}, '', '/'); // 替换历史记录
});

注意：以上操作可能会导致SEO问题，因为搜索引擎抓取的是初始加载的HTML，不是实际的路由更新内容。因此，除非必要，一般建议还是尽量让整个页面刷新。