vue2.0代码实现登录功能

可以使用 vue-router 和 axios 实现登录功能。首先，需要在路由中设置登录页面和登录后的页面，然后在登录页面中使用表单获取用户输入的用户名和密码，通过 axios 发送 POST 请求到后端验证用户信息。如果验证成功，将用户信息存储到本地存储或 Vuex 中，然后跳转到登录后的页面。如果验证失败，提示用户重新输入正确的用户名和密码。具体实现可以参考以下代码：

// 路由配置
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/home', component: Home, meta: { requiresAuth: true } }
]
})

// 登录页面组件
const Login = {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
axios.post('/api/login', {
username: this.username,
password: this.password
}).then(response => {
// 登录成功，保存用户信息并跳转到首页
localStorage.setItem('user', JSON.stringify(response.data))
this.$router.push('/home')
}).catch(error => {
// 登录失败，提示用户重新输入
alert('用户名或密码错误')
})
}
},
template: `
<div>
<input v-model="username" placeholder="请输入用户名">
<input v-model="password" placeholder="请输入密码" type="password">
<button @click="login">登录</button>
</div>
`
}

// 首页组件
const Home = {
computed: {
user() {
return JSON.parse(localStorage.getItem('user'))
}
},
template: `
<div>
<p>欢迎 {{ user.username }} 登录</p>
<button @click="logout">退出登录</button>
</div>
`,
methods: {
logout() {
// 清除用户信息并跳转到登录页面
localStorage.removeItem('user')
this.$router.push('/login')
}
},
beforeRouteEnter(to, from, next) {
// 判断用户是否已登录，未登录则跳转到登录页面
if (!localStorage.getItem('user')) {
next('/login')
} else {
next()
}
}
}