vue实现登录页面跳转

实现登录页面跳转的核心步骤

使用Vue Router进行路由配置 在router/index.js中定义登录页和主页的路由：

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

创建登录表单组件 在Login.vue中设置表单提交方法：

methods: {
  handleSubmit() {
    axios.post('/api/login', this.formData)
      .then(response => {
        localStorage.setItem('token', response.data.token)
        this.$router.push('/home')
      })
  }
}

路由守卫实现权限控制

全局前置守卫 在router/index.js中添加导航守卫：

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

登录状态管理方案

Vuex存储登录状态 在store中管理用户状态：

state: {
  user: null,
  isAuthenticated: false
},
mutations: {
  SET_USER(state, user) {
    state.user = user
    state.isAuthenticated = true
  }
}

登录成功后更新状态 在登录方法中提交mutation：

this.$store.commit('SET_USER', response.data.user)
this.$router.push({ name: 'Home' })

常见问题处理

路由跳转传参 可通过对象形式传递参数：

this.$router.push({
  path: '/home',
  query: { redirect: from.fullPath }
})

登录后返回原页面 在登录成功后处理redirect参数：

const redirect = this.$route.query.redirect || '/home'
this.$router.push(redirect)

表单验证集成 推荐使用Vuelidate等验证库：

validations: {
  formData: {
    username: { required },
    password: { required, minLength: minLength(6) }
  }
}