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

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

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

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

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

🏠效果图

🛫实现内容

• 🎫ElementPuls页面布局(上上上章)
• 🎫动态菜单显示(上上上章)
• 🎫实现菜单折叠效果(上上章)
• 🎫实现部分页面不使用整体框架(本章)
• 🎫统一页面导航标签(上一章)

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

💖实现思路:

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

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

UserLogin.vue

<script setup lang="ts">
    
script>

🛵添加路由

    {
        path: '/login',
        name: 'login',
        component: () => import("@/views/user/UserLogin.vue"),
        meta: { title: "登录", icon: "Setting" }
    }

🛵来看效果