VUE 路由切换白屏的问题

邱秋10月前 17:33

关于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。

[完]

本文于10月前 17:33发布在code分类下,当前已被围观2533次

相关标签:vue,javascript,

永久地址:https://www.chuchur.com/article/vue-router-white-screen

版权声明: 自由转载-署名-非商业性使用

匿名用户