vue路由实现登录跳转

路由守卫实现登录跳转

在Vue项目中，可以通过路由守卫（Navigation Guards）实现登录跳转逻辑。全局前置守卫router.beforeEach是最常用的方式，在路由跳转前进行拦截和验证。

// router/index.js
import router from './router'
import { getToken } from '@/utils/auth' // 假设有获取token的工具函数

router.beforeEach((to, from, next) => {
  const isAuthenticated = getToken() // 检查用户是否已登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 记录目标路由便于登录后跳转
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

路由元信息配置

在路由配置中通过meta字段标记需要认证的路由：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    component: Login
  }
]

登录成功后跳转处理

在登录组件中处理登录成功后的跳转逻辑：

// Login.vue
methods: {
  handleLogin() {
    login(this.loginForm).then(() => {
      this.$router.push(this.$route.query.redirect || '/')
    })
  }
}

动态路由加载

对于权限管理系统，可以结合动态路由实现更精细的控制：

// 登录后动态添加路由
const adminRoutes = [
  { path: '/admin', component: Admin }
]

router.addRoutes(adminRoutes)

组件内守卫

也可以在组件内部使用beforeRouteEnter守卫：

export default {
  beforeRouteEnter(to, from, next) {
    getToken() ? next() : next('/login')
  }
}

以上方法可以根据项目实际需求组合使用，实现完整的登录跳转和权限控制流程。注意处理路由白名单（如登录页、404页等不需要认证的页面），避免死循环跳转。