vue路由实现登录注册

Vue 路由实现登录注册

在 Vue 项目中，可以通过 Vue Router 实现登录和注册功能。以下是具体实现方法：

配置路由

在 router/index.js 中定义登录和注册的路由：

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    }
  ]
})

创建登录组件

在 views/Login.vue 中创建登录表单：

<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="email" type="email" placeholder="Email" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
    <router-link to="/register">Register</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 处理登录逻辑
      this.$router.push('/dashboard')
    }
  }
}
</script>

创建注册组件

在 views/Register.vue 中创建注册表单：

<template>
  <div>
    <h2>Register</h2>
    <form @submit.prevent="handleRegister">
      <input v-model="email" type="email" placeholder="Email" required>
      <input v-model="password" type="password" placeholder="Password" required>
      <button type="submit">Register</button>
    </form>
    <router-link to="/login">Login</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleRegister() {
      // 处理注册逻辑
      this.$router.push('/login')
    }
  }
}
</script>

路由守卫

在 router/index.js 中添加路由守卫，保护需要登录才能访问的路由：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'Login' && to.name !== 'Register' && !isAuthenticated) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

导航菜单

在 App.vue 中添加导航链接：

<template>
  <div>
    <nav>
      <router-link to="/login">Login</router-link>
      <router-link to="/register">Register</router-link>
    </nav>
    <router-view/>
  </div>
</template>

状态管理

如果需要更复杂的状态管理，可以使用 Vuex 存储用户登录状态：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    login({ commit }, user) {
      commit('setUser', user)
    }
  }
})

然后在登录组件中调用：

methods: {
  handleLogin() {
    this.$store.dispatch('login', { email: this.email })
    this.$router.push('/dashboard')
  }
}