vue 路由切换白屏解决方案
关于vue 路由切换的白屏，事实上在开发的过程中，我一直没有遇到过。
我有个哥们遇到这个问题，问我怎么解决的， 我晕了，我没遇到这样的问题啊，我怎么解决啊啊啊啊。。
事实上是遇到过一回的。
场景一：IE9
严格来说不是白屏的问题，应该说是兼容性问题，直接就是不支持，报错了，渲染无法执行造成的。解决方式就是
npm i babel-polyfill -D然后在入口mian.js 引入就完事了，就着么简单
import 'babel-polyfill'有人说是在iphone 5s 或者6s 上会出现这种问题，肯定不是手机的bug。于是我重现了场景，真的和设备无关
场景二 ：如下图
所以这个跟设备真的没有关系。知道问题所在，当然解决办法也有许多
方案一：暴力愚蠢型
//路由跳转前滚动条清零
document.body.scrollTop = document.documentElement.scrollTop = 0
this.$router.push({path:'/a/b/c'})方案二：可行但不可选型
//给router 加一个监听，一旦改变，执行清零，然后再跳转
let routers = new Router({.....})
routers.beforeEach(function (to, from, next) {
......
document.body.scrollTop = document.documentElement.scrollTop = 0
next()
})虽然可行，但是感觉着么干有点愚蠢。因为还有更好的写法，这个写法更佳优雅
方案三：最佳型
其实官方已经提供了当路由切换时，控制滚动位置的方式。scrollBehavior
使用方式如下：
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置 { x: number, y: number } | { selector: string } |
}
})scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
所以假如要解决白屏的问题，可以着么干
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 }
}
})也就是说，当用户点击返回、前进 的时候，页面会滚动到之前 位置，(微信朋友圈的文章就是这样的，读一半返回，再进来接着刚才的位置阅读)
如果是新的page 被 mounted 进来的时候，就重置为0 。
完美的解决了这个问题。
但是这也是个问题，框架为什么不默认呢，假如自定义的时候可以 overwirte。
[完]
posted @
2019-03-02 18:05 邱秋 阅读(
...) 评论(
...) 编辑 收藏