当前位置：首页 > VUE

vue实现登陆跳转

2026-02-23 01:24:26VUE

实现登录跳转的基本流程

在Vue中实现登录跳转通常涉及以下几个关键步骤：创建登录表单、验证用户输入、发送登录请求、处理响应并跳转页面。以下是具体实现方法：

创建登录组件

新建一个Login.vue组件，包含表单和基础数据绑定：

<template>
  <div>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

添加表单验证

在提交前验证用户输入是否合法：

methods: {
  handleLogin() {
    if (!this.username || !this.password) {
      alert('请输入用户名和密码');
      return;
    }
    // 继续登录流程
  }
}

发送登录请求

使用axios或其他HTTP库发送登录请求：

import axios from 'axios';

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });
      // 处理成功响应
    } catch (error) {
      alert('登录失败: ' + error.message);
    }
  }
}

处理登录成功响应

登录成功后保存用户token并跳转：

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });

      // 保存token到本地存储
      localStorage.setItem('userToken', response.data.token);

      // 跳转到主页
      this.$router.push('/home');
    } catch (error) {
      alert('登录失败: ' + error.message);
    }
  }
}

配置路由守卫

在router/index.js中添加全局前置守卫，保护需要登录的页面：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/login', component: () => import('./views/Login.vue') },
    { path: '/home', component: () => import('./views/Home.vue'), meta: { requiresAuth: true } }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const token = localStorage.getItem('userToken');
    if (!token) {
      next('/login');
    } else {
      next();
    }
  } else {
    next();
  }
});

export default router;

添加登出功能

在需要登出的地方清除token并重定向：

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

响应式导航项

根据登录状态显示不同导航项：

<template>
  <div>
    <router-link to="/home" v-if="isLoggedIn">主页</router-link>
    <router-link to="/login" v-else>登录</router-link>
  </div>
</template>

<script>
export default {
  computed: {
    isLoggedIn() {
      return !!localStorage.getItem('userToken');
    }
  }
}
</script>

通过以上步骤，可以实现完整的Vue登录跳转功能，包括表单处理、API调用、路由保护和状态管理。

vue实现登陆跳转