效果图

image.png
上下滚动
image.png

5-1 修改sidebar

sidebar组件中添加scrollPanel组件

src/layout/components/Sidebar/index.vue
image.png

  1. <template>
  2.   <div class="sidebar-wrapper">
  3.     <logo v-if="showLogo" :collapse="isCollapse" />
  4.     <scroll-panel>
  5.       <el-menu
  6.         class="sidebar-container-menu"
  7.         :class="{
  8.           'sidebar-show-logo': showLogo
  9.         }"
  10.         mode="vertical"
  11.         :default-active="activeMenu"
  12.         :background-color="scssVariables.menuBg"
  13.         :text-color="scssVariables.menuText"
  14.         :active-text-color="themeColor"
  15.         :collapse="isCollapse"
  16.         :collapse-transition="true"
  17.       >
  18.         <sidebar-item
  19.           v-for="route in menuRoutes"
  20.           :key="route.path"
  21.           :item="route"
  22.           :base-path="route.path"
  23.         />
  24.       </el-menu>
  25.     </scroll-panel>
  26.   </div>
  27. </template>
  29. <script lang="ts">
  30. import { defineComponent, computed } from 'vue'
  31. import { useRoute } from 'vue-router'
  32. import variables from '@/styles/variables.scss'
  33. import { routes } from '@/router'
  34. import SidebarItem from './SidebarItem.vue'
  35. import { useStore } from '@/store'
  36. import Logo from './Logo.vue'
  37. import ScrollPanel from '@/components/ScrollPanel.vue'
  39. export default defineComponent({
  40.   name: 'Sidebar',
  41.   components: {
  42.     Logo,
  43.     SidebarItem,
  44.     ScrollPanel
  45.   },
  46.   setup() {
  47.     const route = useRoute()
  48.     const store = useStore()
  49.     // 根据路由路径 对应 当前激活的菜单
  50.     const activeMenu = computed(() => {
  51.       const { path, meta } = route
  52.       // 可根据meta.activeMenu指定 当前路由激活时 让哪个菜单高亮选中
  53.       if (meta.activeMenu) {
  54.         return meta.activeMenu
  55.       }
  56.       return path
  57.     })
  58.     // scss变量
  59.     const scssVariables = computed(() => variables)
  60.     // 展开收起状态 稍后放store 当前是展开就让它收起
  61.     const isCollapse = computed(() => !store.getters.sidebar.opened)
  63.     // 渲染路由
  64.     const menuRoutes = computed(() => routes)
  66.     // 获取主题色
  67.     const themeColor = computed(() => store.getters.themeColor)
  69.     // 是否显示logo
  70.     const showLogo = computed(() => store.state.settings.sidebarLogo)
  72.     return {
  73.       // ...toRefs(variables), // 不有toRefs原因 缺点variables里面变量属性来源不明确
  74.       scssVariables,
  75.       isCollapse,
  76.       activeMenu,
  77.       menuRoutes,
  78.       themeColor,
  79.       showLogo
  80.     }
  81.   }
  82. })
  83. </script>
  85. <style lang="scss" scoped>
  86.   .sidebar-wrapper {
  87.     .sidebar-container-menu {
  88.       height: 100vh;
  89.       &.sidebar-show-logo {
  90.         height: calc(100vh - 50px);
  91.       }
  92.     }
  93.   }
  94. </style>

5-2 scrollPanel组件

之前在tagsview文件夹里就有scrollPanel组件， 可以共用一个， 从layout/compoents/TagsView里 把ScrollPanel.vue移动到src/compoents里

image.png
src/layout/components/TagsView/index.vue 修改导入路径
image.png

5-3 随便添加点测试路由

src/router/index.ts
image.png

  1. import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  2. import Layout from '@/layout/index.vue'
  4. // 看作是异步获取路由
  5. export const asyncRoutes: Array<RouteRecordRaw> = [
  6.   {
  7.     path: '/documentation',
  8.     component: Layout, // 布局组件作为一级路由
  9.     redirect: '/documentation/index',
  10.     children: [
  11.       {
  12.         path: 'index',
  13.         name: 'Documentation',
  14.         component: () => import(/* webpackChunkName: "documentation" */ '@/views/documentation/index.vue'),
  15.         meta: {
  16.           title: 'Documentation',
  17.           icon: 'documentation',
  18.           hidden: false, // 菜单栏不显示
  19.           // 路由是否缓存 没有这个属性或false都会缓存 true不缓存
  20.           noCache: false
  21.         }
  22.       }
  23.     ]
  24.   },
  25.   {
  26.     path: '/guide',
  27.     component: Layout,
  28.     redirect: '/guide/index',
  29.     children: [
  30.       {
  31.         path: 'index',
  32.         name: 'Guide',
  33.         component: () => import(/* webpackChunkName: "guide" */ '@/views/guide/index.vue'),
  34.         meta: {
  35.           title: 'Guide',
  36.           icon: 'guide'
  37.           // 当guide路由激活时高亮选中的是 documentation/index菜单
  38.           // activeMenu: '/documentation/index'
  39.         }
  40.       }
  41.     ]
  42.   },
  43.   {
  44.     path: '/system',
  45.     component: Layout,
  46.     redirect: '/system/user',
  47.     meta: {
  48.       title: 'System',
  49.       icon: 'lock',
  50.       alwaysShow: true // 根路由始终显示 哪怕只有一个子路由
  51.     },
  52.     children: [
  53.       {
  54.         path: 'menu',
  55.         name: 'Menu Management',
  56.         component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
  57.         meta: {
  58.           title: 'Menu Management',
  59.           hidden: false,
  60.           breadcrumb: false
  61.         }
  62.       },
  63.       {
  64.         path: 'role',
  65.         name: 'Role Management',
  66.         component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
  67.         meta: {
  68.           title: 'Role Management',
  69.           hidden: false
  70.         }
  71.       },
  72.       {
  73.         path: 'user',
  74.         name: 'User Management',
  75.         component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
  76.         meta: {
  77.           title: 'User Management'
  78.         }
  79.       }
  80.     ]
  81.   },
  82.   { // 外链路由
  83.     path: '/external-link',
  84.     component: Layout,
  85.     children: [
  86.       {
  87.         path: 'https://www.baidu.com/',
  88.         redirect: '/',
  89.         meta: {
  90.           title: 'External Link',
  91.           icon: 'link'
  92.         }
  93.       }
  94.     ]
  95.   },
  96.   { // 404一定放在要在最后面
  97.     path: '/:pathMatch(.*)*',
  98.     redirect: '/404',
  99.     meta: {
  100.       hidden: true
  101.     }
  102.   }
  103. ]
  105. export const constantRoutes: Array<RouteRecordRaw> = [
  106.   {
  107.     path: '/',
  108.     component: Layout,
  109.     redirect: '/dashboard',
  110.     children: [
  111.       {
  112.         path: 'dashboard',
  113.         name: 'Dashboard',
  114.         component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/index.vue'),
  115.         meta: {
  116.           title: 'Dashboard',
  117.           // icon: 'dashboard'
  118.           icon: 'el-icon-platform-eleme',
  119.           affix: true // 固定显示在tagsView中
  120.         }
  121.       }
  122.     ]
  123.   },
  124.   {
  125.     path: '/redirect',
  126.     component: Layout,
  127.     meta: {
  128.       hidden: true
  129.     },
  130.     children: [
  131.       { // 带参数的动态路由正则匹配
  132.         // https://next.router.vuejs.org/zh/guide/essentials/route-matching-syntax.html#%E5%8F%AF%E9%87%8D%E5%A4%8D%E7%9A%84%E5%8F%82%E6%95%B0
  133.         path: '/redirect/:path(.*)', // 要匹配多级路由 应该加*号
  134.         component: () => import('@/views/redirect/index.vue')
  135.       }
  136.     ]
  137.   },
  138.   {
  139.     path: '/401',
  140.     component: Layout,
  141.     children: [
  142.       {
  143.         path: '',
  144.         component: () => import('@/views/error-page/401.vue'),
  145.         meta: {
  146.           title: '401',
  147.           icon: '404',
  148.           hidden: true
  149.         }
  150.       }
  151.     ]
  152.   },
  153.   {
  154.     path: '/404',
  155.     component: () => import('@/views/error-page/404.vue'),
  156.     meta: {
  157.       hidden: true // 404 hidden掉
  158.     }
  159.   },
  160.   // 以下都是测试路由 测完可以删了
  161.   {
  162.     path: '/menu',
  163.     name: 'Menu Management1',
  164.     component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
  165.     meta: {
  166.       title: 'Menu Management1',
  167.       hidden: false,
  168.       breadcrumb: false
  169.     }
  170.   },
  171.   {
  172.     path: '/role',
  173.     name: 'Role Management1',
  174.     component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
  175.     meta: {
  176.       title: 'Role Management1',
  177.       hidden: false
  178.     }
  179.   },
  180.   {
  181.     path: '/user',
  182.     name: 'User Management1',
  183.     component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
  184.     meta: {
  185.       title: 'User Management1'
  186.     }
  187.   },
  188.   {
  189.     path: '/menu',
  190.     name: 'Menu Management2',
  191.     component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
  192.     meta: {
  193.       title: 'Menu Management2',
  194.       hidden: false,
  195.       breadcrumb: false
  196.     }
  197.   },
  198.   {
  199.     path: '/role',
  200.     name: 'Role Management2',
  201.     component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
  202.     meta: {
  203.       title: 'Role Management2',
  204.       hidden: false
  205.     }
  206.   },
  207.   {
  208.     path: '/user',
  209.     name: 'User Management2',
  210.     component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
  211.     meta: {
  212.       title: 'User Management2'
  213.     }
  214.   },
  215.   {
  216.     path: '/menu',
  217.     name: 'Menu Management3',
  218.     component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
  219.     meta: {
  220.       title: 'Menu Management3',
  221.       hidden: false,
  222.       breadcrumb: false
  223.     }
  224.   },
  225.   {
  226.     path: '/role',
  227.     name: 'Role Management3',
  228.     component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
  229.     meta: {
  230.       title: 'Role Management4',
  231.       hidden: false
  232.     }
  233.   },
  234.   {
  235.     path: '/user',
  236.     name: 'User Management3',
  237.     component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
  238.     meta: {
  239.       title: 'User Management3'
  240.     }
  241.   },
  242.   {
  243.     path: '/menu',
  244.     name: 'Menu Management4',
  245.     component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
  246.     meta: {
  247.       title: 'Menu Management4',
  248.       hidden: false,
  249.       breadcrumb: false
  250.     }
  251.   },
  252.   {
  253.     path: '/role',
  254.     name: 'Role Management4',
  255.     component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
  256.     meta: {
  257.       title: 'Role Management4',
  258.       hidden: false
  259.     }
  260.   },
  261.   {
  262.     path: '/user',
  263.     name: 'User Management4',
  264.     component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
  265.     meta: {
  266.       title: 'User Management4'
  267.     }
  268.   },
  269.   {
  270.     path: '/role',
  271.     name: 'Role Management5',
  272.     component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
  273.     meta: {
  274.       title: 'Role Management5',
  275.       hidden: false
  276.     }
  277.   },
  278.   {
  279.     path: '/user',
  280.     name: 'User Management5',
  281.     component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
  282.     meta: {
  283.       title: 'User Management5'
  284.     }
  285.   }
  286. ]
  288. export const routes = [
  289.   ...constantRoutes,
  290.   ...asyncRoutes
  291. ]
  293. const router = createRouter({
  294.   history: createWebHashHistory(),
  295.   routes
  296. })
  298. export default router

测试完滚动 测试的路由都可以删了