【Vue 功能总结】页面刷新

目录

类别一：浏览器原生级别（整页有感刷新）

1. window.location.reload()

2. window.location.href 重新赋值

3. history.go(0)

类别二：组件级别（局部无感刷新 - 宏观）

1. v-if 销毁重建法

2. 改变 :key 属性触发重新挂载

类别三：数据级别（局部无感刷新 - 微观）

1. 重新调用数据请求函数

2. URL 参数加时间戳强制绕过缓存

类别四：网络请求级别（Token 无感刷新）

1. Axios 拦截器无感知刷新 Token

总结

在 Vue 单页应用（SPA）中，刷新不仅是重新获取数据，更涉及状态管理和用户体验。根据刷新的粒度和影响范围，我们将实现方式分为四大类别，并在每个类别下详细拆解具体的方法。

类别一：浏览器原生级别（整页有感刷新）

这种刷新方式会触发浏览器的原生重载机制，相当于直接重启整个 Vue 应用。

1. window.location.reload()

这是最常用、最原生的刷新方法。它相当于用户点击了浏览器的刷新按钮。

// 强制向服务器重新请求资源，不读取缓存 window.location.