TopTitle.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <template>
  2. <div class="top-title">
  3. <el-breadcrumb separator="/">
  4. <el-breadcrumb-item :to="item.url" v-for="item of breadListLast" :key="item.url">
  5. {{item.title}}
  6. </el-breadcrumb-item>
  7. </el-breadcrumb>
  8. <el-dropdown @command="logout">
  9. <div class="avator">
  10. <img src="../../../assets/img/default.jpg" alt="">
  11. </div>
  12. <el-dropdown-menu slot="dropdown">
  13. <el-dropdown-item>退出登录</el-dropdown-item>
  14. </el-dropdown-menu>
  15. </el-dropdown>
  16. </div>
  17. </template>
  18. <style lang="less">
  19. .top-title {
  20. display: flex;
  21. align-items: center;
  22. justify-content: space-between;
  23. width: 100%;
  24. height: 50px;
  25. box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  26. background: #eff2f7;
  27. padding: 0 20px;
  28. box-sizing: border-box;
  29. .avator {
  30. width: 36px;
  31. height: 36px;
  32. border-radius: 50%;
  33. overflow: hidden;
  34. img {
  35. width: 100%;
  36. height: 100%;
  37. }
  38. }
  39. }
  40. </style>
  41. <script>
  42. import { logout } from '@/api/login'
  43. export default {
  44. //面包屑解决方案,此方法只适用于面包屑与路由显示顺序一致,例如path:01/02/03 面包屑也是01/02/03
  45. data() {
  46. return {
  47. breadListLast: []
  48. };
  49. },
  50. methods: {
  51. loadChange() {
  52. const router = this.$router.options.routes;
  53. router.forEach(element => {
  54. if(element.children) {
  55. element.children.forEach(item => {
  56. if (this.$route.path.indexOf(item.meta.url) !== -1) {
  57. console.log(item.meta)
  58. this.breadListLast.push(item.meta);
  59. if(this.breadListLast.length > 1) {
  60. this.breadListLast.shift();
  61. }
  62. }
  63. })
  64. }
  65. });
  66. },
  67. logout() {
  68. logout().then(res => {
  69. if(res.code == 200) {
  70. this.$router.push({ path: '/login' });
  71. localStorage.setItem("token", '');
  72. }
  73. });
  74. }
  75. },
  76. watch: {
  77. $route(to, from) {
  78. this.loadChange()
  79. }
  80. },
  81. //页面挂载之后,解析路由,给出面包屑,路由里面一定要含有breadCom组件的path
  82. mounted: function () {
  83. this.loadChange()
  84. }
  85. }
  86. </script>