在Vue的路线。URL会被刷新，但登录页面的内容始终与/页面一致

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Login from '../views/Login.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true } // 需要认证
  },
  // 其他路由...
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

router.beforeEach((to, from, next) => {
  const loggedIn = localStorage.getItem('user');

  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

export default router;

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      user: null
    };
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    }
  },
  actions: {
    login({ commit }, user) {
      localStorage.setItem('user', JSON.stringify(user));
      commit('SET_USER', user);
    },
    logout({ commit }) {
      localStorage.removeItem('user');
      commit('SET_USER', null);
    }
  }
});