Vue实现页面刷新跳转到当前页面功能

<template>
  <div>
    <button @click="refreshPage">Refresh Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    refreshPage() {
      window.location.reload();
    }
  }
}
</script>

<template>
  <div>
    <button @click="redirectToCurrentPage">Redirect to Current Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    redirectToCurrentPage() {
      this.$router.go(0);
    }
  }
}
</script>

<template>
  <div>
    <button @click="navigateToCurrentPage">Navigate to Current Page</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToCurrentPage() {
      this.$router.push({ path: this.$route.path });
    }
  }
}
</script>

<template>
  <div>
    <button @click="navigateAndLog">Navigate and Log</button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    // 添加导航守卫
    router.beforeEach((to, from, next) => {
      if (to.meta.needsLogging) {
        console.log(`Navigating from ${from.path} to ${to.path}`);
      }
      next();
    });

    const navigateAndLog = () => {
      router.push({ path: router.currentRoute.value.path, meta: { needsLogging: true } });
    };

    return {
      navigateAndLog
    };
  }
}
</script>

import { createStore } from 'vuex';

export default createStore({
  state: {
    isRefreshed: false
  },
  mutations: {
    setRefreshed(state) {
      state.isRefreshed = true;
    }
  },
  actions: {
    refreshPage({ commit }) {
      commit('setRefreshed');
      window.location.reload();
    }
  }
});

<template>
  <div>
    <button @click="refreshPage">Refresh Page with Vuex</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const refreshPage = () => {
      store.dispatch('refreshPage');
    };

    return {
      refreshPage
    };
  }
}
</script>