一、浏览器兼容
前段时间我写的一个页面,需要挂出去。得配多入口,多入口配完了挂出去,发现样式都错乱了,滚动条没有或者高度压根没撑起来。后来问了后端,才知道挂出去的页面是放在谷歌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()