后台-vite中import.meta.glob的具体用法 与 动态路由和递归组件菜单栏

 1.获取图标文件里的所有图标

html">​​<template>
	<div class="icon-select">
		<el-input v-model="iconName" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
		</el-input>
		<div class="icon-select__list">
			<div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
				<svg-icon color="#999" :icon-class="item" style="height: 30px; width: 16px; margin-right: 5px" />
				<span>{{ item }}</span>
			</div>
		</div>
	</div>
</template>

javascript"><script setup lang="ts">
	import { ref } from 'vue'
	import SvgIcon from '@/***ponents/SvgIcon/index.vue'

	const icons = [] as string[]
    //获取图标文件
	const modules = import.meta.glob('../../assets/icons/*.svg')
	for (const path in modules) {
		const p = path.split('assets/icons/')[1].split('.svg')[0]
        //icons为图标文件名 数组
		icons.push(p)
	}
	const iconList = ref(icons)

	const iconName = ref('')

	const emit = defineEmits(['selected'])

	function filterIcons() {
		iconList.value = icons
		if (iconName.value) {
			iconList.value = icons.filter((item) => item.indexOf(iconName.value) !== -1)
		}
	}

	function selectedIcon(name: string) {
		emit('selected', name)
		document.body.click()
	}

	function reset() {
		iconName.value = ''
		iconList.value = icons
	}

	defineExpose({
		reset,
	})
</script>

<style lang="scss" scoped>
	.icon-select {
		width: 100%;
		padding: 10px;

		&__list {
			height: 200px;
			overflow-y: scroll;

			div {
				height: 30px;
				line-height: 30px;
				margin-bottom: -5px;
				cursor: pointer;
				width: 33%;
				float: left;
			}

			span {
				display: inline-block;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
		}
	}
</style>

modules

path.split('assets/icons/')

p 

2.动态路由

store/modules/permission.ts

import { PermissionState } from '@/types/store/permission'
import { RouteRecordRaw } from 'vue-router'
import { defineStore } from 'pinia'
import { constantRoutes } from '@/router'
import { listRoutes } from '@/api/system/menu'

//获取view下所有的vue文件
const modules = import.meta.glob('../../views/**/*.vue')
export const Layout = () => import('@/layout/index.vue')

// 递归拼接组成路由的***ponent
export const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
	const res: RouteRecordRaw[] = []
	routes.forEach(
		(route) => {
			const tmp = { ...route } as any

			//if (hasPermission(roles, tmp)) {
			if (tmp.***ponent == 'Layout') {
				tmp.***ponent = Layout
			} else {
				const ***ponent = modules[`../../views/${tmp.***ponent}.vue`] as any
				if (***ponent) {
					tmp.***ponent = modules[`../../views/${tmp.***ponent}.vue`]
				} else {
					tmp.***ponent = modules[`../../views/error-page/404.vue`]
				}
			}
			tmp.name = tmp.path
			res.push(tmp)

			if (tmp.children) {
				tmp.children = filterAsyncRoutes(tmp.children, roles)
			}
		}
		//}
	)
	return res
}

const usePermissionStore = defineStore({
	id: 'permission',
	state: (): PermissionState => ({
		routes: [],
		addRoutes: [],
	}),
	actions: {
		setRoutes(routes: RouteRecordRaw[]) {
			this.addRoutes = routes
			// this.routes供左边菜单栏使用，constantRoutes为路由文件原有的登陆、首页等
			this.routes = constantRoutes.concat(routes)
		},
		generateRoutes(roles: string[]) {
			return new Promise((resolve, reject) => {
				listRoutes()
					.then((response) => {
						// asyncRoutes：获取后端返回的路由
						const asyncRoutes = response.data
						//  a***essedRoutes：拼接成功后想要的路由
						const a***essedRoutes = filterAsyncRoutes(asyncRoutes, roles)
						this.setRoutes(a***essedRoutes)
						resolve(a***essedRoutes)
					})
					.catch((error) => {
						reject(error)
					})
			})
		},
	},
})

export default usePermissionStore

modules

 asyncRoutes：获取后端返回的路由

 a***essedRoutes：拼接成功后想要的路由

router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import useStore from '@/store';

export const Layout = () => import('@/layout/index.vue');

// 参数说明: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
// 静态路由
export const constantRoutes: Array<RouteRecordRaw> = [
  {
    path: '/redirect',
    ***ponent: Layout,
    meta: { hidden: true },
    children: [
      {
        path: '/redirect/:path(.*)',
        ***ponent: () => import('@/views/redirect/index.vue')
      }
    ]
  },
  {
    path: '/login',
    ***ponent: () => import('@/views/login/index.vue'),
    meta: { hidden: true }
  },
  {
    path: '/404',
    ***ponent: () => import('@/views/error-page/404.vue'),
    meta: { hidden: true }
  },

  {
    path: '/',
    ***ponent: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        ***ponent: () => import('@/views/dashboard/index.vue'),
        name: 'Dashboard',
        meta: { title: '首页', icon: 'homepage', affix: true }
      },
      {
        path: '401',
        ***ponent: () => import('@/views/error-page/401.vue'),
        meta: { hidden: true }
      },
    ]
  }

  // 外部链接
  /*{
        path: '/external-link',
        ***ponent: Layout,
        children: [
            {
                path: 'https://www.***blogs.***/haoxianrui/',
                meta: { title: '外部链接', icon: 'link' }
            }
        ]
    }*/
  // 多级嵌套路由
  /* {
         path: '/nested',
         ***ponent: Layout,
         redirect: '/nested/level1/level2',
         name: 'Nested',
         meta: {title: '多级菜单', icon: 'nested'},
         children: [
             {
                 path: 'level1',
                 ***ponent: () => import('@/views/nested/level1/index.vue'),
                 name: 'Level1',
                 meta: {title: '菜单一级'},
                 redirect: '/nested/level1/level2',
                 children: [
                     {
                         path: 'level2',
                         ***ponent: () => import('@/views/nested/level1/level2/index.vue'),
                         name: 'Level2',
                         meta: {title: '菜单二级'},
                         redirect: '/nested/level1/level2/level3',
                         children: [
                             {
                                 path: 'level3-1',
                                 ***ponent: () => import('@/views/nested/level1/level2/level3/index1.vue'),
                                 name: 'Level3-1',
                                 meta: {title: '菜单三级-1'}
                             },
                             {
                                 path: 'level3-2',
                                 ***ponent: () => import('@/views/nested/level1/level2/level3/index2.vue'),
                                 name: 'Level3-2',
                                 meta: {title: '菜单三级-2'}
                             }
                         ]
                     }
                 ]
             },
         ]
     }*/
];

// 创建路由
const router = createRouter({
  history: createWebHashHistory(),
  routes: constantRoutes as RouteRecordRaw[],
  // 刷新时，滚动条位置还原
  scrollBehavior: () => ({ left: 0, top: 0 })
});

// 重置路由
export function resetRouter() {
  const { permission } = useStore();
  permission.routes.forEach(route => {
    const name = route.name;
    if (name && router.hasRoute(name)) {
      router.removeRoute(name);
    }
  });
}

export default router;

与App.vue同级 permission.ts

import router from '@/router'
import useStore from '@/store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false }) // 进度环显示/隐藏
// 白名单路由
const whiteList = ['/login']
router.beforeEach(async (to, from, next) => {
	if (to.meta.title) {
		//判断是否有标题
		document.title = `智-admin-${to.meta.title}  `
	} else {
		document.title = `智-admin`
	}
	NProgress.start()
	const { user, permission } = useStore()
	const hasToken = user.token
	if (hasToken) {
		// 登录成功，跳转到首页
		if (to.path == '/login') {
			next({ path: '/' })
			NProgress.done()
		} else {
			const hasGetUserInfo = user.roles.length > 0
			// 第一步.hasGetUserInfo一开始为false
			if (hasGetUserInfo) {
				if (to.matched.length == 0) {
					from.name ? next({ name: from.name as any }) : next('/401')
				} else {
					// 第四步
					next()
				}
			} else {
				try {
					// 第二步
					await user.getUserInfo()
					const roles = user.roles
					const a***essRoutes: any = await permission.generateRoutes(roles)
					a***essRoutes.forEach((route: any) => {
						router.addRoute(route)
					})
					// 第三步
                    // 如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由
					next({ ...to, replace: true })
				} catch (error) {
					// 移除 token 并跳转登录页
					await user.resetToken()
					next(`/login?redirect=${to.path}`)
					NProgress.done()
				}
			}
		}
	} else {
		// 未登录可以访问白名单页面(登录页面)
		if (whiteList.indexOf(to.path) !== -1) {
			next()
		} else {
			next(`/login?redirect=${to.path}`)
			NProgress.done()
		}
	}
})

router.afterEach(() => {
	NProgress.done()
})

最后在main.ts导入permission.ts

next({ ...to, replace: true }) 意思：VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明_路由守卫next_anne都的博客-CSDN博客

3.动态递归组件侧边菜单栏

1.src/layout/***ponents/sidebar/index.vue

<template>
	<div :class="{ 'has-logo': showLogo }">
		<logo v-if="showLogo" :collapse="isCollapse" />
		<el-scrollbar>
			<el-menu
				:default-active="activeMenu"
				:collapse="isCollapse"
				:background-color="variables.menuBg"
				:text-color="variables.menuText"
				:active-text-color="variables.menuActiveText"
				:unique-opened="true"
				:collapse-transition="false"
				mode="vertical"
				@open="handleOpen">
				<sidebar-item v-for="route in routes" :item="route" :key="route.path" :base-path="route.path" :is-collapse="isCollapse" />
			</el-menu>
		</el-scrollbar>
	</div>
</template>

<script setup lang="ts">
	import { ***puted } from 'vue'
	import { useRoute, useRouter } from 'vue-router'
	import SidebarItem from './SidebarItem.vue'
	import Logo from './Logo.vue'
	import variables from '@/styles/variables.module.scss'
	import useStore from '@/store'
	const { permission, setting, app } = useStore()

	const route = useRoute()
	const router = useRouter()
	const routes = ***puted(() => permission.routes)
	const showLogo = ***puted(() => setting.sidebarLogo)
	const isCollapse = ***puted(() => !app.sidebar.opened)

	const activeMenu = ***puted(() => {
		const { meta, path } = route
		if (meta.activeMenu) {
			return meta.activeMenu as string
		}
		return path
	})
	// 默认选中第一个
	const handleOpen = (key: string, keyPath: string[]) => {
		router.push(key)
	}
</script>

routes

 

sidebarItem组件

<template>
	<div v-if="!item.meta || !item.meta.hidden">
		<!-- 没有子路由，子菜单，没有展开项 -->
		<template
			v-if="
				hasOneShowingChild(item.children, item) &&
				(!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
				(!item.meta || !item.meta.alwaysShow)
			">
			<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
				<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
					<svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon" />
					<template #title>
						{{ generateTitle(onlyOneChild.meta.title) }}
					</template>
				</el-menu-item>
			</app-link>
		</template>
		<!-- 有子路由，有展开项 -->
		<el-sub-menu v-else :index="resolvePath(item.path)" teleported>
			<template #title>
				<svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
				<span v-if="item.meta && item.meta.title">{{ generateTitle(item.meta.title) }}</span>
			</template>
			<!-- 递归组件 -->
			<sidebar-item
				v-for="child in item.children"
				:key="child.path"
				:item="child"
				:is-nest="true"
				:base-path="resolvePath(child.path)"
				class="nest-menu" />
		</el-sub-menu>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import path from 'path-browserify'
	import { isExternal } from '@/utils/validate'
	import AppLink from './Link.vue'
	import { generateTitle } from '@/utils/i18n'
	import SvgIcon from '@/***ponents/SvgIcon/index.vue'

	const props = defineProps({
		item: {
			type: Object,
			required: true,
		},
		isNest: {
			type: Boolean,
			required: false,
		},
		basePath: {
			type: String,
			required: true,
		},
	})

	const onlyOneChild = ref()

	function hasOneShowingChild(children = [] as any, parent: any) {
		if (!children) {
			children = []
		}
		const showingChildren = children.filter((item: any) => {
			if (item.meta && item.meta.hidden) {
				return false
			} else {
				// 过滤出子元素
				onlyOneChild.value = item
				return true
			}
		})
		// 当只有一个子路由，该子路由显示子菜单，没有用展开项
		if (showingChildren.length == 1) {
			return true
		}

		// 没有子路由则显示父路由
		if (showingChildren.length == 0) {
			onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
			return true
		}

		return false
	}
	// 解析路径
	function resolvePath(routePath: string) {
		// isExternal 判断是否为网址
		if (isExternal(routePath)) {
			return routePath
		}
		if (isExternal(props.basePath)) {
			return props.basePath
		}
		// path.resolve('/partner', '/business')  为 /partner/business
		return path.resolve(props.basePath, routePath)
	}
</script>

<style lang="scss" scoped></style>

appLink组件

<template>
  <a v-if="isExternal(to)" :href="to" target="_blank" rel="noopener">
    <slot />
  </a>
  <div v-else @click="push">
    <slot />
  </div>
</template>

<script lang="ts">
import { ***puted, define***ponent } from 'vue';
import { isExternal } from '@/utils/validate';
import { useRouter } from 'vue-router';

import useStore from '@/store';

const { app } = useStore();

const sidebar = ***puted(() => app.sidebar);
const device = ***puted(() => app.device);

export default define***ponent({
  props: {
    to: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const router = useRouter();
    const push = () => {
      if (device.value == 'mobile' && sidebar.value.opened == true) {
        app.closeSideBar(false);
      }
      router.push(props.to).catch(err => {
        console.log(err);
      });
    };
    return {
      push,
      isExternal
    };
  }
});
</script>