浏览器兼容及路由拦截

一、浏览器兼容

前段时间我写的一个页面，需要挂出去。得配多入口，多入口配完了挂出去，发现样式都错乱了，滚动条没有或者高度压根没撑起来。后来问了后端，才知道挂出去的页面是放在谷歌49版本的浏览器上的，要知道现在谷歌都一百多版本了。。。浏览器不兼容！这可愁坏我了！后来经过排查发现是：
diaplay布局，使用height 100%无效导致的

原因：猜测谷歌49浏览器可能只识别父元素定的height样式

解决：给每一层的容器都加上display:flex;flex:1;height:100%.，包括组件里的一些容器。坚持一层一层加。如果还是没有撑起来，那一定时哪一层漏了。从源头开始加（高度断开的那一层）

二、路由拦截

有这样一个需求，在路由离开时要弹出未保存提示，刚好我退出路由的方法是这样写的

this.$route.go(-1)

拦截的方法这样写的

  // 此处省略一点逻辑
  beforeRouteLeave(to, from, next) {
    if (result) {
         next()
       {
  },

用这种方法出现了一个问题，页面已经离开了之后，提示才弹出来。也就是说路由没拦截到
解决：老老实实用push方法

 this.$router.push()