本文共 6616 字，大约阅读时间需要 22 分钟。

接上篇

左侧导航

左侧菜单收缩

• 上一篇变量声明的d.ts文件前面的文件名需要和variables.scss的文件名一样，也就是叫variables.scss.d.ts，才可以不报错。
• layout/components/index.vue

• sidebaritem.vue

• 在对应位置写出空白组件，并配上路由：

import {
    createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'import Layout from '@/layout/index.vue'export const asyncRoutes: Array
   
     = [  {
       path: '/documentation',    component: Layout,    redirect: '/documentation/index',    children: [      {
           path: 'index',        name: 'Documentation',        component: () =>          import(            /* webpackChunkName: "documentation" */ '@/views/documentation/index.vue'          ),        meta: {
             title: 'Documentation',          icon: 'documentation'        }      }    ]  },  {
       path: '/guide',    component: Layout,    redirect: '/guide/index',    children: [      {
           path: 'index',        name: 'Guide',        component: () =>          import(/* webpackChunkName: "guide" */ '@/views/guide/index.vue'),        meta: {
             title: 'Guide',          icon: 'guide'        }      }    ]  },  {
       path: '/system',    component: Layout,    redirect: '/system/user',    meta: {
         title: 'System',      icon: 'lock'    },    children: [      {
           path: 'menu',        component: () =>          import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),        meta: {
             title: 'Menu Management',          icon: 'list'        }      },      {
           path: 'role',        component: () =>          import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),        meta: {
             title: 'Role Management',          icon: 'list'        }      },      {
           path: 'user',        component: () =>          import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),        meta: {
             title: 'User Management',          icon: 'list'        }      }    ]  }]export const constantRoutes: Array
    
      = [  {
       path: '/',    component: Layout,    redirect: '/dashboard',    children: [      {
           path: 'dashboard',        name: 'Dashboard',        component: () =>          import(            /* webpackChunkName: "dashboard" */ '@/views/dashboard/index.vue'          ),        meta: {
             title: 'Dashboard'        }      }    ]  }]export const routes = [  ...constantRoutes,    ...asyncRoutes]const router = createRouter({
     history: createWebHashHistory(),  routes})export default router
    
   

• sidebar.scss

#app {
     .sidebar-container {
       height: 100%;    background-color: $menuBg;    // menu未收起时样式    &-menu:not(.el-menu--collapse) {
         width: $sideBarWidth;    }    .el-menu {
         border: none;    }  }}

• 此时点击展收测试能正常收放就ok。

左侧菜单路由

• 把sidebar-item里传一下路由：

• 判断下有几个孩子，分别处理，并递归：

• 能看见正常收缩，以及路由显示即ok

外链路由

• sidebaritemlink.vue

• 用了动态标签，学到了。
• 加入路由：

{
       // 外链路由    path: '/external-link',    component: Layout,    children: [      {
           path: 'https://www.baidu.com/',        redirect: '/',        meta: {
             title: 'External Link',          icon: 'link'        }      }    ]  }

• 改写resolvepath方法：

const resolvePath = (childPath: string) => {
         if (isExternal(childPath)) {
           return childPath      }      return path.resolve(props.basePath, childPath)    }

• 套在第一个标签上：

• 如果成功跳转ok。

hidden属性

• 给onlyOne函数修改下，无children则给个标志：

const theOnlyOneChildRoute = computed(() => {
         if (showingChildNumber.value > 1) {
           return null      }      if (item.value.children) {
           for (const child of item.value.children) {
             // hidden属性控制路由是否渲染成菜单 像login 401 404等路由都不需要渲染成菜单          if (!child.meta || !child.meta.hidden) {
               return child          }        }      }      return {
           ...props.item,        path: '', // resolvePath避免resolve拼接时 拼接重复        noShowingChildren: true // 无可渲染chiildren      }    })

• 加个hidden路由，如果隐藏就ok。

路由缓存与动画

• 添加AppMain.vue：

• 在layout/index.vue中导入即可：

• 在路由中写个input ，进入写几个字 切换有动画，切回能看见前面刚写的即ok 。

icon支持elemicon

• 将路由icon变为：

icon: 'el-icon-platform-eleme'

• 增加类型type.ts

import {
    RouteRecordRaw, RouteMeta } from 'vue-router'// router的meta类型type ItemRouterMeta = RouteMeta & {
     icon: string  title: string}// 菜单menu路由类型export type MenuItemRouter = RouteRecordRaw & {
     meta: ItemRouterMeta}

• 改写vue-router的meta：

import 'vue-router'declare module 'vue-router' {
     interface RouteMeta {
       title?: string // 路由菜单title    icon?: string // 路由菜单icon    hidden?: boolean // 菜单栏不显示    // 路由是否缓存 没有这个属性或false都会缓存 true不缓存    noCache?: boolean    activeMenu?: string // 指定菜单激活    breadcrumb?: boolean // 该路由是否显示面包屑    affix?: boolean // 固定显示在tagsView中    alwaysShow?: boolean // 菜单是否一直显示根路由  }}

• 渲染时判断下即可：

• 如果能看见饿了么icon则ok。

增加alwaysshow与指定高亮

• 指定高亮做个判断就行了：

const activeMenu = computed(() => {
         const {
    path, meta } = route      if (meta.activeMenu) {
           return meta.activeMenu      }      return path    })

• alwaysshow就写个判断，哪个路由有那个，那么本来该省略该路由就不省略：

// 设置 alwaysShow: true，这样它就会忽略上面定义的规则，一直显示根路由 哪怕只有一个子路由也会显示为嵌套的路由菜单    const alwaysShowRootMenu = computed(      () => props.item.meta && props.item.meta.alwaysShow    )    // 是否只有一条可渲染路由    const isRenderSingleRoute = computed(      () =>        !alwaysShowRootMenu.value &&        (!theOnlyOneChildRoute.value?.children || noShowingChildren.value)    )

• 剩下的下次写。

转载地址：https://blog.csdn.net/yehuozhili/article/details/117421004 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！