1.创建目录

• BasicLayout——全局布局

• components——布局组件

  • GlobalContent：全局内容
  • GlobalHeader：全局头部页面

2.处理GlobalHeader

创建HeaderMenu——头部菜单

声明相关类型

在typings目录下创建system.d.ts

  declare namespace App {/** 全局头部属性 */interface GlobalHeaderProps {/** 显示logo */showLogo: boolean;/** 显示头部菜单 */showHeaderMenu: boolean;/** 显示菜单折叠按钮 */showMenuCollapse: boolean;}/** 菜单项配置 */type GlobalMenuOption = import('naive-ui').MenuOption & {key: string;label: string;routeName: string;routePath: string;icon?: () => import('vue').VNodeChild;children?: GlobalMenuOption[];};/** 面包屑 */type GlobalBreadcrumb = import('naive-ui').DropdownOption & {key: string;label: string;disabled: boolean;routeName: string;hasChildren: boolean;children?: GlobalBreadcrumb[];};/** 多页签Tab的路由 */interface GlobalTabRouteextends Pick {/** 滚动的位置 */scrollPosition: {left: number;top: number;};}interface MessageTab {/** tab的key */key: number;/** tab名称 */name: string;/** badge类型 */badgeProps?: import('naive-ui').BadgeProps;/** 消息数据 */list: MessageList[];}interface MessageList {/** 数据唯一值 */id: number;/** 头像 */avatar?: string;/** 消息icon */icon?: string;svgIcon?: string;/** 消息标题 */title: string;/** 消息发送时间 */date?: string;/** 消息是否已读 */isRead?: boolean;/** 消息描述 */description?: string;/** 标签名称 */tagTitle?: string;/** 标签props */tagProps?: import('naive-ui').TagProps;}}

配置路由相关状态管理

    import {  constRouter } from '@/router';import { defineStore } from 'pinia';
import { computed } from 'vue';
import { useRoute } from 'vue-router';interface RouteState {/** 菜单 */menus: App.GlobalMenuOption[];}export const useRouteStore = defineStore('route-store', {state:():RouteState => ({menus:[],}),actions:{transformRouteToMenu(){let menu:App.GlobalMenuOption[] = [] ;constRouter.forEach(route => {const{name , path} = routeconst menuItem : App.GlobalMenuOption = {key:path,label:String(name)}if(path != '/'){menu.push(menuItem);}})return menu},getRoute(){(this.menus as App.GlobalMenuOption[]) = this.transformRouteToMenu();},isLogin(){const route = useRoute();const isLogin = computed(() => route.fullPath === '/')return isLogin.value}}});

添加路由守卫

在router->guard下创建dynamic.ts

import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
import { useRouteStore } from '@/store';/*** 动态路由*/
export async function createDynamicRouteGuard(to: RouteLocationNormalized,_from: RouteLocationNormalized,next: NavigationGuardNext,router: Router
) {const route = useRouteStore();await route.getRoute();next()}

修改路由配置

修改路由守卫的简单next

import type { Router } from 'vue-router';
import { useTitle } from '@vueuse/core';
import { createDynamicRouteGuard } from './dynamic';/*** 路由守卫函数* @param router - 路由实例*/
export function createRouterGuard(router: Router) {router.beforeEach(async (to, from, next) => {// 开始 loadingBarwindow.$loadingBar?.start();// 页面跳转权限处理createDynamicRouteGuard(to, from, next, router)});router.afterEach(to => {// 设置document titleuseTitle(to.name);// 结束 loadingBarwindow.$loadingBar?.finish();});
}

创建HeaderMenu组件

创建index.ts导出

import HeaderMenu from './HeaderMenu.vue';export{HeaderMenu,
} 

创建GlobalHeader

3.全局布局组件

在BasicLayout目录下创建简单布局组件。

LayoutHeader

LayoutMain

layout组件

仅针对login不显示menu

全局布局组件

测试