index.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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和legendRules(图例)时,隐藏 menuList组件
  46. */
  47. handleRoute(newRoute) {
  48. let path = ''
  49. let ignoreRoute = ['legendRules', 'legendLibrary']
  50. newRoute.path && (path = newRoute.path)
  51. if (!path) {
  52. return true
  53. }
  54. let lastPath = path.split('home/')[1]
  55. if (ignoreRoute.includes(lastPath)) {
  56. this.showMenu = false
  57. } else {
  58. this.showMenu = true
  59. }
  60. }
  61. },
  62. components: {
  63. menuList
  64. }
  65. }
  66. </script>
  67. <style lang="less">
  68. .home {
  69. width: 100%;
  70. height: 100%;
  71. display: flex;
  72. flex-direction: column;
  73. overflow: hidden;
  74. canvas:focus {
  75. outline: none;
  76. }
  77. }
  78. </style>