vue3后台管理系统之layout组件的搭建

1.1静态布局

//项目提供scss全局变量
// 左侧菜单宽度
//定义项目主题颜色

//左侧的菜单的宽度
$base-menu-width     :260px;
//左侧菜单的背景颜色
$base-menu-background:#001529;
$base-menu-min-width :50px;

// 顶部导航的高度
$base-tabbar-height:50px;

//左侧菜单logo高度设置
$base-menu-logo-height:50px;

//左侧菜单logo右侧文字大小
$base-logo-title-fontSize:20px;

1.2动态logo和标题搭建

src下创建setting.ts

// 项目图标和标题
export default {
    title: 'v3后台管理系统', //项目标题设置
    logo: '../../../../../public/logo.png', //项目配置logo
    logoHidden: true, //logo组件是否隐藏
}

1.3左侧静态布局

1.4配置左侧动态路由

store管理路由数组

//引入路由(常量路由)
import { constantRoute } from '@/router/routes'
const useUserStore = defineStore('User', {
    // 小仓库存储数据
    state: (): UserState => {
        return {
            token: GET_TOKEN(),
            menuRoutes: constantRoute, //仓库存储生成菜单需要数组(路由)
        }
    },

import type { RouteRecordRaw } from 'vue-router'
// 定义小仓库state数据类型
export interface UserState {
    token: string | null
    menuRoutes: RouteRecordRaw[]
}

传递路由数组到Menu组件

接收menuList

1.5递归组件生成菜单

修改router

添加meta

meta: {

title: ' 登录 ',

hidden: false //代表路由标题在菜单中是否隐藏

}

hidden代表是否隐藏

// 对外配置路由
import Login from '@/views/login/index.vue'
import Home from '@/views/home/index.vue'
import Error from '@/views/404/index.vue'
import Test from '@/views/test/index.vue'
import Layout from '@/layout/index.vue'
export const constantRoute = [
  {
    path: '/login',
    component: Login,
    name: 'login',
    meta: {
      title: ' 登录 ',
      hidden: false //代表路由标题在菜单中是否隐藏
    }
  },
  {
    path: '/',
    component: Layout,
    name: 'layout',
    meta: {
      title: 'layout ',
      hidden: false //代表路由标题在菜单中是否隐藏  true代表隐藏
    },
    children: [
      {
        path: '/home',
        component: Home,
        meta: {
          title: ' 首页 ',
          hidden: false //代表路由标题在菜单中是否隐藏
        }
      },
      {
        path: '/test',
        component: Test,
        meta: {
          title: ' 测试 ',
          hidden: false //代表路由标题在菜单中是否隐藏
        }
      }
    ]
  },

  {
    path: '/404',
    component: Error,
    name: '404',
    meta: {
      title: ' 404 ',
      hidden: false //代表路由标题在菜单中是否隐藏
    }
  },
  {
    path: '/:pathMatch',
    redirect: '/404',
    name: 'Any',
    meta: {
      title: ' 任意路由 ',
      hidden: true //代表路由标题在菜单中是否隐藏
    }
  }
]

根据判断条件展示路由

递归组件实现

1.6配置菜单图标

注册所有图标#

您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts

    // 如果您正在使用CDN引入，请删除下面一行。
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'

    const app = createApp(App)
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
    }

import SvgIcon from './SvgIcon/index.vue'
import type { App, Component } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const components: { [name: string]: Component } = { SvgIcon }
export default {
    install(app: App) {
        // 注册项目全部的全局组件
        Object.keys(components).forEach((key: string) => {
            app.component(key, components[key])
        })
        // 将element-lpus提供的图标注册为全局组件
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
    },
}

在meta添加属性icon

动态组件component

1.7配置全部路由

一般后台管理系统都有登录、首页、数据大屏、权限管理这几个功能，所以接下来配置这些路由。

// 对外配置路由
import Login from '@/views/login/index.vue'
import Home from '@/views/home/index.vue'
import Error from '@/views/404/index.vue'
import Role from '@/views/acl/role/index.vue'
import User from '@/views/acl/user/index.vue'
import Scree from '@/views/scree/index.vue'
import Layout from '@/layout/index.vue'
export const constantRoute = [
  {
    path: '/login',
    component: Login,
    name: 'login',
    meta: {
      icon: 'Edit',
      title: ' 登录 ',
      hidden: true //代表路由标题在菜单中是否隐藏
    }
  },
  {
    path: '/',
    component: Layout,
    name: 'layout',
    meta: {
      title: 'layout ',
      hidden: false, //代表路由标题在菜单中是否隐藏  true代表隐藏
      icon: 'Promotion'
    },
    redirect: '/home',
    children: [
      {
        path: '/home',
        component: Home,
        meta: {
          title: ' 首页 ',
          hidden: false, //代表路由标题在菜单中是否隐藏
          icon: 'HomeFilled'
        }
      }
    ]
  },
  {
    path: '/scree',
    component: Scree,
    name: 'Screen',
    meta: {
      title: '数据大屏',
      hidden: false,
      icon: 'Histogram'
    }
  },
  {
    path: '/acl',
    component: Layout,
    name: 'Acl',
    meta: {
      title: '权限管理 ',
      icon: 'Lock'
    },
    children: [
      {
        path: '/acl/user',
        component: User,
        meta: {
          title: '用户管理',
          hidden: false, //代表路由标题在菜单中是否隐藏
          icon: 'User'
        }
      },
      {
        path: '/acl/role',
        component: Role,
        meta: {
          title: '角色管理',
          hidden: false, //代表路由标题在菜单中是否隐藏
          icon: 'UserFilled'
        }
      }
    ]
  },

  {
    path: '/404',
    component: Error,
    name: '404',
    meta: {
      icon: 'Edit',
      title: ' 404 ',
      hidden: true //代表路由标题在菜单中是否隐藏
    }
  },
  {
    path: '/:pathMatch',
    redirect: '/404',
    name: 'Any',
    meta: {
      title: ' 任意路由 ',
      hidden: true //代表路由标题在菜单中是否隐藏
    }
  }
]

渲染layout一级路由的子路由

1.8页面加载时默认激活菜单的 index