LeftNav.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <div class="left-nav">
  3. <el-menu
  4. class="el-menu-vertical-demo"
  5. background-color="#324157"
  6. text-color="#bfcbd9"
  7. active-text-color="#20a0ff"
  8. :router=true
  9. :default-active="$route.path">
  10. <el-menu-item index="/dashboard/index" route="/dashboard/index">
  11. <i class="el-icon-menu"></i>
  12. <span slot="title">首页</span>
  13. </el-menu-item>
  14. <el-submenu index="/nav">
  15. <template slot="title">
  16. <i class="el-icon-location"></i>
  17. <span>导航</span>
  18. </template>
  19. <el-menu-item-group>
  20. <el-menu-item index="/nav/nav1" route="/nav/nav1">
  21. <span slot="title">导航一</span>
  22. </el-menu-item>
  23. </el-menu-item-group>
  24. <el-menu-item-group>
  25. <el-menu-item index="/nav/nav2" route="/nav/nav2">
  26. <span slot="title">导航二</span>
  27. </el-menu-item>
  28. </el-menu-item-group>
  29. </el-submenu>
  30. <!--
  31. <el-menu-item index="/nav/nav1" route="/nav/nav1">
  32. <i class="el-icon-menu"></i>
  33. <span slot="title">导航一</span>
  34. </el-menu-item>
  35. <el-menu-item index="/nav/nav2" route="/nav/nav2">
  36. <i class="el-icon-setting"></i>
  37. <span slot="title">导航二</span>
  38. </el-menu-item>
  39. -->
  40. </el-menu>
  41. </div>
  42. </template>
  43. <style lang="scss">
  44. .left-nav {
  45. width: 200px;
  46. height: 100%;
  47. background-color: #324157;
  48. .el-menu {
  49. border: none;
  50. }
  51. }
  52. </style>