Vue 单页应用程序 (SPA) 后台管理：点击刷新当前页面

前言

在 Vue.js SPA 中，使用 this.$router.push('login') 等方式进行页面跳转时，当前页面不会出现任何反应，并且推入的路由也不会进入记录。这是由于 SPA 的特性，在页面加载后，所有内容都是动态渲染的，刷新页面不会触发任何新的请求或重新加载。

解决方案

为了实现点击刷新当前页面的功能，我们需要使用 Vue.js 提供的 beforeRouteUpdate 守卫。这个守卫会在路由更新之前触发，我们可以利用它来检测路由是否指向当前页面，如果是则手动触发页面刷新。

步骤

1. 在路由配置中，为目标页面添加 beforeRouteUpdate 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeRouteUpdate: (to, from, next) => {
        if (to.fullPath === from.fullPath) {
          window.location.reload();
        } else {
          next();
        }
      },
    },
  ],
});

2. 在 beforeRouteUpdate 守卫中，判断 to.fullPath 和 from.fullPath 是否相等。如果相等，表示点击了刷新按钮，则触发 window.location.reload() 刷新页面。如果不相等，则表示正常路由跳转，继续执行 next()。

代码示例

<template>
  <div>
    <button @click="$router.push('/login')">登录</button>
  </div>
</template>

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

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

    return {
      router,
    };
  },
});
</script>

结论

通过使用 Vue.js 的 beforeRouteUpdate 守卫，我们可以轻松地实现点击刷新 SPA 后台管理中当前页面的功能，解决传统 SPA 页面刷新无反应的问题，提高用户体验。