Vue路由：已登录时访问根路径如何重定向至首页？

方案一：路由配置中直接处理 #

你可以在根路径的路由配置里通过守卫或完善redirect函数逻辑实现，核心是要能获取全局的登录状态。

1. 全局登录状态的管理 #

isLoggedIn一般作为全局状态存放，比如用Vuex、Pinia这类状态管理库，或者直接存在本地存储（localStorage/sessionStorage）中。举个Vuex的示例：

// store/index.js
export default new Vuex.Store({
  state: {
    // 初始化时根据本地令牌判断登录状态
    isLoggedIn: localStorage.getItem('token') ? true : false
  },
  mutations: {
    setLoginState(state, status) {
      state.isLoggedIn = status
      // 同步更新本地存储
      status ? localStorage.setItem('token', '你的登录令牌') : localStorage.removeItem('token')
    }
  }
})

2. 路由配置里的重定向逻辑 #

修改根路径的路由配置，在redirect或beforeEnter守卫中判断登录状态：

// router/index.js
import store from '../store'

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login,
    // 用redirect函数实现判断
    redirect: (to) => {
      return store.state.isLoggedIn ? { path: '/home' } : to.path
    },
    // 也可以用beforeEnter守卫，效果一致
    beforeEnter: (to, from, next) => {
      store.state.isLoggedIn ? next('/home') : next()
    }
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    // 可选：给/home加守卫，未登录时强制跳回登录页
    beforeEnter: (to, from, next) => {
      !store.state.isLoggedIn ? next('/') : next()
    }
  }
]

方案二：在Login页面的