【VUE3使用记录】页面及路由刷新

整理工作中用到的页面刷新方式：
1.provide/inject
2.router.go(0)
3.location.reload()
4.重复点击菜单时刷新页面

一、使用provide和inject

控制<router-view>的显示隐藏
默认<router-view v-if="isRouterAlive" /> isRouterAlive是true，在需要刷新的时候把这个值设为false，接着再重新设为true。搭配provide和inject使用，不会使页面出现短暂的空白，体验效果比较好
App.vue

需要刷新的组件：

// 导入inject
import { inject } from 'vue';
// 注入刷新事件,这里括号中的参数要对应上前面provide中的第一个参数
const goRefresh = inject('reload');

// 在需要执行的地方调用方法
goRefresh();

二、router.go(0)

利用了history中前进、后退的功能，传入0来刷新当前页面。相当于F5键刷新
刷新时页面会有一段时间的白屏。

const router = useRouter();
router.go(0);

三、location.reload()

效果同router.go(0)

location.reload();

1.JavaScript 中的一个方法，用于重新加载当前页面。这个方法可以在页面加载完成后使用，它将重新请求服务器并重新加载页面。

2.可传入布尔型参数，默认为false：

true ：强制浏览器从服务器获取当前页面资源
忽略本地缓存，确保获取的是服务器上的最新版本，实现带缓存刷新的效果。
false：从缓存中读取当前页面
如果页面及其依赖资源（如图片、脚本等）在缓存中可用且未过期，浏览器将直接使用这些缓存的副本，而不会向服务器发起请求。这种方式的刷新速度较快，但不会检查服务器上是否有更新的内容，适用于需要快速重载页面而不关心内容是否更新的场景。

3.对比location.replace()

replace() ：通过指定url替换当前缓存历史，试用replace()后不能再"前进、后退"来访问已被替换的url

四、重复点击菜单实现页面刷新

router.push()默认情况下不会重新加载组件，它只是改变URL并触发路由切换，如果目标路由对应的组件已经加载过，则不会重新创建和渲染该组件。这对于提高性能是有益的，但在需要强制刷新当前页面数据的场景下，这种方法就不适用了。

1.实现方法

要在Vue中实现点击菜单后刷新页面数据，而不实际重新加载整个页面，可以采取以下几种策略：
1.1 使用路由守卫
可以在目标路由的 beforeEach 导航守卫中，监听到导航发生时，手动调用组件的初始化方法或数据更新方法。

// 在路由配置中或全局前置守卫里
router.beforeEach((to, from, next) => {
  if (to.name === 'YourTargetRouteName') { // 替换为你的目标路由名称
    // 假设你有一个刷新数据的方法名为 refreshData
    to.meta.refreshData && to.meta.refreshData();
  }
  next();
});

然后，在定义路由时，可以给目标路由添加一个元信息（meta）来标记需要刷新数据：

{
  path: '/your-path',
  name: 'YourTargetRouteName',
  component: YourComponent,
  meta: {
    refreshData: () => {
      // 实现你的数据刷新逻辑
    }
  }
}

也可以使用组件内路由守卫

Vue 中的 onBeforeRouteUpdate生命周期钩子是在组件被复用时，即路由参数变化（需要给路由加入不同的参数如时间戳）但组件不重新创建的情况下触发的，它并不直接控制页面的刷新

beforeRouteUpdate(to, from, next) {
  // 强制重新加载当前路由
  next({ ...to, force: true });
}

1.2 使用key属性强制重新渲染组件
在Vue组件上使用:key属性，当:key的值变化时，Vue会认为这是一个全新的组件而进行重新渲染。
1.3 直接使用强制刷新

2.记录实际使用 key属性强制重新渲染 <router-view>

在路由参数变化时强制刷新页面
点击菜单tab栏时路由加入时间戳参数

利用 key 属性强制重新渲染