5 首页框架及路由配置

zi__you2024-10-17 7:10

1 添加首页LayoutVue.vue组件，登录成功之后跳转到该组件

html 复制代码 
<script setup>
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'

// 导入ref
import { ref } from 'vue'

// 初始化isAdmin
const isAdmin = ref(false)

import { useTokenStore } from '@/stores/token.js'
const tokenStore = useTokenStore();



// 导入路由
import router from '@/router'
import { ElMessage, ElMessageBox } from 'element-plus'
//条目被点击后，调用的函数
const handleCommand = (command) => {
    if (command == 'logout') {
        //退出登录
        ElMessageBox.confirm(
            '你确认退出登录码？',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                //用户点击了确认
  
                tokenStore.token = ''
                //跳转到登录页
                router.push('/login')
            })
            .catch(() => {
                //用户点击了取消
                ElMessage({
                    type: 'info',
                    message: '取消退出',
                })
            })
    } else {
        router.push(`/user/${command}`);
    }
}


</script>

<template>
    <el-container class="layout-container">

        <!-- 左侧菜单 -->
        <el-aside width="200px">
            <div class="el-aside__logo"></div>
            <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" router>
                <el-menu-item  >
                    <el-icon>
                        <Book />
                    </el-icon>
                    <span>图书资源</span>
                </el-menu-item>
                <!-- 如果是管理员就显示用户管理组件 否则就显示借阅记录组件 -->
                <el-menu-item v-if="!isAdmin"  >
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>借阅记录</span>
                </el-menu-item>
                <el-menu-item v-else  >
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
                <el-sub-menu>
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item  >
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item  >
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item  >
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <div>当前用户：<strong></strong></div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar src="@/assets/default.png" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                            <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
                    内容展示区
                </div> -->
                <router-view></router-view>
            </el-main>
            <!-- 底部区域 -->
            <el-footer>软件之声论坛 ©2024 Created by xumj</el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
    height: 100vh;

    .el-aside {
        background-color: #232323;

        &__logo {
            height: 120px;
            background: url('@/assets/logo.png') no-repeat center / 120px auto;
        }

        .el-menu {
            border-right: none;
        }
    }

    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}
</style>

2 配置路由规则，并新建子组件（自行创建）

js 复制代码 
import { createRouter, createWebHistory } from 'vue-router'
import LayoutVue from '../views/LayoutVue.vue'
import Login from '../views/Login.vue'
import BookResourcesVue from '../views/books/BookResourcesVue.vue'
import BookRecordsVue from '../views/books/BookRecordsVue.vue'
import UserAvatarVUe from '../views/user/UserAvatarVUe.vue'
import UserResetPasswordVue from '../views/user/UserResetPasswordVue.vue'

import UserInfoVue from '../views/user/UserInfoVue.vue'
import UserManageVue from '../views/user/UserManageVue.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/login', component: Login },
    {
      path: '/',
      component: LayoutVue,  //首页布局父组件
      redirect: '/book/resources',
      // 子路由
      children: [
        { path: '/book/resources', component: BookResourcesVue },
        { path: '/book/records', component: BookRecordsVue },
        { path: '/user/info', component: UserInfoVue },
        { path: '/user/avatar', component: UserAvatarVUe },
        { path: '/user/password', component: UserResetPasswordVue },
        { path: '/user/logout', component: Login },
        // 用户管理组件
        { path: '/user/manage', component: UserManageVue }
      ]
    }
  ]
})

export default router

3 修改首页布局中左侧导航代码，添加路由连接如下

html 复制代码 
    <!-- 左侧菜单 -->
        <el-aside width="200px">
            <div class="el-aside__logo"></div>
            <el-menu active-text-color="#ffd04b" background-color="#232323" text-color="#fff" router>
                <el-menu-item index="/book/resources">
                    <el-icon>
                        <Book />
                    </el-icon>
                    <span>图书资源</span>
                </el-menu-item>
                <!-- 如果是管理员就显示用户管理组件 否则就显示借阅记录组件 -->
                <el-menu-item v-if="!isAdmin" index="/book/records">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>借阅记录</span>
                </el-menu-item>
                <el-menu-item v-else index="/user/manage">
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
                <el-sub-menu>
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="/user/info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/user/avatar">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/user/password">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>

4 实现路由配置，效果如下


相关推荐
轻口味31 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami34 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda1 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs：GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235952 小时前
web复习（三）
前端
迷糊的『迷』2 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库