vue动态路由攻略

1.动态路由渲染

1.1 首选梳理动态路由渲染流程，首先登录，然后获取动态路由菜单，然后把动态路由菜单处理一下，然后进行处理，存储到仓库中， 然后，在菜单组件中检测到仓库数据变化，生产动态路由，在路由守卫中检测是否页面刷新，当页面刷新的时候，再次请求接口，再次生成路由菜单。

/**
 * @method  动态生成路由
 */
const Layout = () => import('@/layout/LayoutView.vue');
const modules = import.meta.glob('@/views/**/**.vue');
export const filterAsyncRoutes = (routes, roles) => {
  if (!routes) return [];
  const asyncRoutes: any = [];

  routes.forEach((route) => {
    const tmpRoute = { ...route }; // ES6扩展运算符复制新对象
    if (!route.name) {
      tmpRoute.name = route.path;
    }
    if (tmpRoute.component?.toString() == 'Layout') {
      tmpRoute.component = Layout;
    } else {
      const component = modules[`/src/views/${tmpRoute.component}.vue`];
      if (component) {
        tmpRoute.component = component;
      } else {
        // tmpRoute.component = modules[`../../views/error-page/404.vue`];
      }
    }

    if (tmpRoute.children) {
      tmpRoute.children = filterAsyncRoutes(tmpRoute.children, roles);
    }

    asyncRoutes.push(tmpRoute);
  });

  return asyncRoutes;
};

2.动态路由支鼠标高亮篇章

2.1 首页先下载阿里图标库，下载 svg 图标，然后在 main.js 文件中引入该图标的 import ‘@/assets/font/index.css’;文件，然后在后台配置菜单，路由的地方生成菜单

<a-menu :style="{ width: '220px', height: '100%' }" v-model:open-keys="defaultMeau"
     v-model:selected-keys="activeMenu" @collapse="onCollapse" show-collapse-button :collapsed-width="60"
     :collapsed="collapsed" @menuItemClick="handlerItemSelect" v-if="menuList?.length">
     <div v-for="item in menuList.filter((item) => item.meta.isMenu)" :key="item.path">
       <a-sub-menu v-if="item.children && item.children.length > 0" :key="item.path">
         <!-- 多个子菜单图标 -->
         <template #icon>
           <span class="menu__icon">
             <svg class="icon" aria-hidden="true">
               <use :xlink:href="`#icon-${item.meta.icon}`"></use>
             </svg>
           </span>
         </template>
         <!-- 多个子菜单一级目录 -->
         <template #title>
           <span>{{ item.meta.title }}</span>
         </template>
         <!-- 多个子菜单二级目录 -->
         <a-menu-item :key="scoped.path" v-for="scoped in item.children.filter((item) => item.meta.isMenu)">
           {{ scoped.meta.title }}
         </a-menu-item>
       </a-sub-menu>
       <!-- 渲染没有子菜单的  -->
       <!-- 渲染没有子菜单的 一级目录 -->
       <template v-else>
         <a-menu-item :key="item.path" class="one-menu">
           <!-- 渲染没有子菜单的 一级图标 -->
           <template #icon>
             <span class="menu__icon">
               <svg class="icon" aria-hidden="true">
                 <use :xlink:href="`#icon-${item.meta.icon}`"></use>
               </svg>
             </span>
           </template>
           <!-- 渲染没有子菜单的 一级菜单 -->
           <template v-if="item.meta.isMenu == true">
             <span>{{ item.meta.title }}</span>
           </template>
         </a-menu-item>
       </template>
     </div>
   </a-menu>