当前位置：首页 > VUE

vue实现登录跳转页面

2026-02-24 17:49:42VUE

使用 Vue Router 实现登录跳转

在 Vue 项目中，可以通过 Vue Router 的路由守卫功能实现登录后的页面跳转。需要配置路由规则和导航守卫。

安装 Vue Router 依赖包：

npm install vue-router

配置基础路由

在 router/index.js 中定义路由规则，包括需要认证的受保护路由：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Dashboard from '../views/Dashboard.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

实现导航守卫

添加全局前置守卫检查用户认证状态：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({ path: '/login' })
    } else {
      next()
    }
  } else {
    next()
  }
})

登录表单处理

在 Login.vue 组件中实现登录逻辑：

methods: {
  handleLogin() {
    // 模拟登录API调用
    fakeLogin(this.username, this.password)
      .then(response => {
        localStorage.setItem('token', response.token)
        this.$router.push('/dashboard')
      })
      .catch(error => {
        console.error('登录失败:', error)
      })
  }
}

退出登录功能

在需要退出登录的组件中添加退出方法：

methods: {
  logout() {
    localStorage.removeItem('token')
    this.$router.push('/login')
  }
}

状态管理集成（可选）

对于更复杂的应用，可以使用 Vuex 集中管理认证状态：

// store/modules/auth.js
const state = {
  token: localStorage.getItem('token') || null
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  CLEAR_TOKEN(state) {
    state.token = null
    localStorage.removeItem('token')
  }
}

路由懒加载优化

对于生产环境，建议使用路由懒加载提升性能：

const Dashboard = () => import('../views/Dashboard.vue')

动态路由权限控制

对于基于角色的权限系统，可以动态添加路由：

function addDynamicRoutes(router, userRole) {
  const adminRoutes = [
    { path: '/admin', component: AdminPanel }
  ]

  if (userRole === 'admin') {
    router.addRoutes(adminRoutes)
  }
}

vue实现登录跳转页面