vue中每个页面适配不同的底部高度，实现底部高度动态变化

在vue项目中，有这样一个需求：列表页1，列表页2内容能完全展示，不会出现页面滚动条，列表3页面要求将内容全部显示，页面不要出现滚动条，本想直接去改底部的高度，但是由于底部区域是单独封装成了一个公共组件，如果直接在这个底部组件的样式中修改高度，由于其他页面中间内容区域的高度不一样，统一调低底部高度后会导致底部的内容看起来没有在中间，特别对于中间内容少的时候（此时中间内容区域的高度为设置的min-height），还有详情页（内容多必然要有滚动条）就只有很窄的一小条底部区域，特别不美观。
列表页和详情页布局如下：

本想在底部组件中写一个方法，每次检测到页面跳转就计算底部高度，但是用父组件传一个currentUrl到底部组件。但是的到的值只是首页的url，更监听不到他的变化，用组件的导航守卫beforeRouteUpload也捕捉不到
于是差点放弃，想着直接在底部组件样式中写死一个高度去满足主要要改的那个页面，再把中间内容区域的min-height调大一点，让内容少的列表页稍微美观点，其他页面丑就丑吧…
但是，追求完美的我怎么能容忍这样子呢，于是乎，一觉醒来想到了一个方法，稍微麻烦一点
首先在底部区域组件中修改样式（之前footer高度140，padding-top: 55;，为了让每个页面的底部内容都能居中，改用flex布局）

.footer {
  border-top: 1px solid #ddd;
  color: @fontColor;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  min-height: 50px;
  height: 140px;
  }

在三个列表页组件中都写一个方法，在每日加载列表的时候求调用一下

methods: {
      initFooterStyle() {
        this.$nextTick(() => {
          const clientHeight = document.documentElement.clientHeight
          const footer = document.getElementsByClassName('footer')[0]
          const footerTop = footer.getBoundingClientRect().top
          footer.style.height = clientHeight - footerTop + 'px'
        })
      },
      ......
 }

为了改变窗口大小时也底部高度动态改变，还可以加上：

mounted() {
      window.onresize = () => {
        return (() => {
          this.initFooterStyle()
        })()
      }
    }

但是由于之前中间区域的min-height设的600，列表页2每次获取到的footerTop都是600+头部高度，这样的话底部高度就会高一些，页面就会出现滚动条
解决：列表页2每页显示十条数据，那么就将中间内容区域的min-height可重新设置为列表页2中间内容区域的高度，在initFooterStyle加代码：

const centerContainer = document.getElementsByClassName('center_container')[0]
centerContainer.style.minHeight = 665 + 'px'

到此列表页都已达到要求，但是发现每个列表页下点开的详情页的底部高度都分别和对应列表页的高度一样，对于有滚动条的列表页，拉到底部后底部高度很高或很低，那也不是我想要的，但是我没有去每个详情页去配置，因为在详情页组件中的样式中去.footer{}是没用的，所以就得在每个详情页写个设置底部高度的方法，然后还要去调用，太麻烦了，
解决：找到列表页中打开详情页的地方，在该方法中加：

toDeal (row) {
        document.getElementsByClassName('footer')[0].style.height = 140 + 'px'
      },

到此，每个页面实现底部高度动态变化完美解决