url变化触发popstate hasn变化触发hashChange

在单页应用(Single Page Application, SPA)中，当路由发生变化时，通常我们会主动清空或更新浏览器缓存，以确保用户看到的是最新的页面内容。以下是使用JavaScript的一个常见做法，以Vue.js为例： 1. **使用Vuex状态管理库**： 如果你在项目中使用了Vuex，可以在路由切换时更新store中的状态，并监听`beforeRouteUpdate`事件，该事件会在当前路由组件已经渲染并接收到新的`to`和`from`参数之后调用。在这个时候，你可以更新对应的缓存数据。 ```javascript 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`事件处理程序中，清理缓存或执行其他刷新操作。 ```javascript window.addEventListener('popstate', () => { // 清理缓存或其他刷新操作 localStorage.removeItem('yourKey'); }); // 当路由改变时 this.$router.push({ name: 'yourRoute' }).then(() => { history.replaceState({}, '', '/'); // 替换历史记录 }); ``` 注意：以上操作可能会导致SEO问题，因为搜索引擎抓取的是初始加载的HTML，不是实际的路由更新内容。因此，除非必要，一般建议还是尽量让整个页面刷新。