index.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <div class='home'>
  3. <menu-list v-if='showMenu' :modelNum.sync='modelNum' @handlerouterName='handlerouterName'></menu-list>
  4. <router-view />
  5. </div>
  6. </template>
  7. <script>
  8. import menuList from '@/components/menuList.vue'
  9. export default {
  10. props: [],
  11. data() {
  12. return {
  13. modelNum: 0,
  14. // shebeisheshiShow: false,
  15. routerName: 'aa',
  16. imgSrcNum: 1,
  17. tanchuanShow: false,
  18. showMenu: true //是否显隐menuList
  19. }
  20. },
  21. computed: {},
  22. created() {},
  23. mounted() {
  24. // 路由为home下的legendLibrary(图例)时,刷新时执行 handleRoute 路由处理函数
  25. this.handleRoute(this.$route)
  26. },
  27. watch: {
  28. // tanchuanShow(newVal) {
  29. // console.log(newVal)
  30. // }
  31. $route: 'handleRoute'
  32. },
  33. methods: {
  34. handlerouterName(val) {
  35. this.routerName = val
  36. if (val == 'de') {
  37. this.modelNum = 3
  38. } else if (val == 'floorFunc') {
  39. this.modelNum = 2
  40. }
  41. },
  42. /**
  43. * @name handleRoute
  44. * @param newRoute 当前路由
  45. * @description 路由处理函数, 当前路由为home下的legendLibrary(图例)时,隐藏 menuList组件
  46. */
  47. handleRoute(newRoute) {
  48. let path = ''
  49. newRoute.path && (path = newRoute.path)
  50. if (!path) {
  51. return true
  52. }
  53. let lastPath = path.split('home/')[1]
  54. if (lastPath === 'legendLibrary') {
  55. this.showMenu = false
  56. } else {
  57. this.showMenu = true
  58. }
  59. }
  60. },
  61. components: {
  62. menuList
  63. }
  64. }
  65. </script>
  66. <style lang="less">
  67. .home {
  68. width: 100%;
  69. height: 100%;
  70. display: flex;
  71. flex-direction: column;
  72. overflow: hidden;
  73. canvas:focus {
  74. outline: none;
  75. }
  76. }
  77. </style>