优化站点_石家庄网络推广的优势_推广引流平台app大全_seo优化排名是什么

手摸手6-Vue 3 登录功能实现

介绍

在这篇文章中，我们将实现一个简单的 Vue 3 登录功能。我们将使用 Composition API 和 Vue Router 来构建这个功能。

1.进入项目

我们进入到手摸手6创建的前端项目 ojmall-ui 中

2. 设置路由

进入 src 目录下一个 router 文件夹，编辑 index.js 文件：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/Login.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'login',component: Login,},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/AboutView.vue'),},],
})export default router

3. 创建登录组件

在 src/views 目录下创建 Login.vue 文件：

<template><div class="login"><h1>登录</h1><form @submit.prevent="handleLogin"><div><label for="username">用户名:</label><input type="text" v-model="username" required /></div><div><label for="password">密码:</label><input type="password" v-model="password" required /></div><button type="submit">登录</button></form><p v-if="errorMessage" class="error">{{ errorMessage }}</p></div>
</template><script>
import { ref } from 'vue';export default {setup() {const username = ref('');const password = ref('');const errorMessage = ref('');const handleLogin = () => {if (username.value === 'admin' && password.value === '123456') {alert('登录成功！');// 这里可以添加跳转逻辑} else {errorMessage.value = '用户名或密码错误';}};return {username,password,errorMessage,handleLogin,};},
};
</script><style scoped>
.error {color: red;
}
</style>

4. 更新主应用文件

在 src/main.js 中引入路由：

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')

5. 运行项目

现在，你可以运行项目来查看效果：

npm run dev

访问 http://localhost:8080，你将看到一个简单的登录表单。

这里实现了一个基本的 Vue 3 登录功能

总结

在这篇文章中，我们实现了一个基本的 Vue 3 登录功能