vue实现刷新跳转首页

Vue 实现刷新跳转首页的方法

在 Vue 项目中，实现刷新后跳转首页可以通过以下几种方式实现：

使用路由导航守卫

在 router/index.js 文件中添加全局前置守卫，监听路由变化并在刷新时重定向到首页。

router.beforeEach((to, from, next) => {
  if (from.name === null) { // 判断是否为刷新
    next('/'); // 跳转到首页
  } else {
    next();
  }
});

监听浏览器刷新事件

在 App.vue 的 created 生命周期中监听 beforeunload 事件，刷新时跳转首页。

created() {
  window.addEventListener('beforeunload', () => {
    this.$router.push('/');
  });
}

利用本地存储标记刷新

通过 sessionStorage 标记页面刷新状态，在 App.vue 的 created 钩子中处理跳转。

created() {
  if (sessionStorage.getItem('isReload')) {
    this.$router.push('/');
    sessionStorage.removeItem('isReload');
  }
},
mounted() {
  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('isReload', 'true');
  });
}

直接使用 window.location

在需要刷新跳转的地方直接使用原生方法强制刷新并跳转。

methods: {
  refreshToHome() {
    window.location.href = '/';
  }
}

选择合适的方法取决于具体需求。路由守卫适合全局控制，本地存储方案更精确但复杂，原生方法简单直接但可能影响体验。