[vue3] 实现登录页面不使用整体框架

最新推荐文章于 2024-09-10 23:28:16 发布

沫洺

最新推荐文章于 2024-09-10 23:28:16 发布

阅读量1.8k

点赞数 3

分类专栏： Vue3 文章标签：前端

本文链接：https://blog.csdn.net/HeyVIrBbox/article/details/126945664

版权

本文介绍了如何在Vue3项目中不依赖整体框架ElementPuls，独立构建登录页面。讲解了从创建UserLogin.vue组件、添加路由、实现登录页面、菜单项隐藏逻辑，到表单验证的详细步骤。最后，讨论了登录成功后的页面跳转和与后端接口的整合准备。

摘要由CSDN通过智能技术生成

✨✨博主简介:一个会bbox的👨‍💻

✨✨个人主页:沫洺的主页

📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏

💖💖如果文章对你有所帮助请留下三连✨✨

🏠效果图

🛫实现内容

🎫ElementPuls页面布局(上上上章)

🎫动态菜单显示(上上上章)

🎫实现菜单折叠效果(上上章)

🎫实现部分页面不使用整体框架(本章)

🎫统一页面导航标签(上一章)

🛫登录页面不使用整体框架

💖实现思路:

🚲登录页面不使用整体框架,也就是不使用ElementPuls页面布局,且在菜单项中不显示,在页面右上角退出登录会跳转到登录页面,编写登录页面,简单实现登录成功事件

🛵新建src/views/user/UserLogin.vue

UserLogin.vue
<template>
    登录页面
</template>
<script setup lang="ts">
    
</script>
🛵添加路由
    {
        path: '/login',
        name: 'login',
        component: () => import("@/views/user/UserLogin.vue"),
        meta: { title: "登录", icon: "Setting" }
    }
🛵来看效果

</