用Vue做一个登录功能

好的，你可以参考以下步骤实现Vue登录功能：

1. 在Vue项目中安装Vue Router和Axios插件： npm install vue-router axios --save

2. 在src目录下新建一个views文件夹，用于存放页面视图组件。

3. 在views文件夹下新建一个Login.vue文件，用于存放登录页面的视图。

4. 在Login.vue文件中添加以下代码：

<template>
<div class="login">
<h2>登录</h2>
<form>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" v-model="username" />
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" id="password" v-model="password" />
</div>
<button @click.prevent="login">登录</button>
</form>
</div>
</template>

<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
axios.post('/api/login', { // 发送登录请求
username: this.username,
password: this.password
}).then(response => { // 登录成功
localStorage.setItem('token', response.data.token) // 将token保存到localStorage中
this.$router.push('/home') // 跳转到首页
}).catch(error => { // 登录失败
console.log(error)
})
}
}
}
</script>

5. 在src目录下新建一个router文件夹，用于存放路由配置文件。

6. 在router文件夹下新建一个index.js文件，并添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: Home,
meta: {
requiresAuth: true // 需要登录才能访问
}
},
{
path: '/login',
name: 'Login',
component: Login
}
]

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) { // 判断该路由是否需要登录权限
if (localStorage.getItem('token')) { // 判断当前用户的登录状态
next()
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
} else {
next()
}
})

export default router

7. 在src目录下新建一个api文件夹，用于存放后端API接口文件。

8. 在api文件夹下新建一个login.js文件，并添加以下代码：

import axios from 'axios'

const instance = axios.create({
baseURL: 'http://localhost:8080' // 后端API接口地址
})

export const login = data => {
return instance.post('/api/login', data)
}

9. 启动Vue项目，并访问登录页面：http://localhost:8080/login

以上就是利用Vue实现登录功能的步骤，如果你还有其他的问题可以继续问我。