站长资讯网
最全最丰富的资讯网站

深入解析vue中路由切换白屏的问题(附代码)

之前的文章《浅析vue中complie数据双向绑定原理(代码详解)》中,给大家了解了vue中complie数据双向绑定原理。下面本篇文章给大家了解vue中路由切换白屏的问题,伙伴们来看看。

深入解析vue中路由切换白屏的问题(附代码)

关于vue路由切换的白屏,事实上在开发的过程中,我一直没有遇到过。

我有个哥们遇到这个问题,问我怎么解决的,我晕了,我没遇到这样的问题啊,我怎么解决啊啊啊啊。。

事实上是遇到过一回的。

以下内容于 2019-07-25 修改。

服务器部署配置问题

这个问题造成的白屏体现在:

首页可以正常浏览,但是——通过$router.push('/home')跳转页面 正常,然后刷新就是白屏或 404

本不想在文章加入这个问题和解决方案,因为官网已经提供了正确的部署姿势,(Vue 的路由模式自行查看文档),主要是针对HTML5 History模式:

const router = new VueRouter({   mode: 'history',   routes: [...] })

devbuild都没有问题,这个是肯定的,所以问题就出在服务器配置上,以nginx为例,正确的配置如下:

location / {   ....   try_files $uri $uri/ /index.html; #重点 }

Apache,原生 Node.jsIISCaddyFirebase 主机

请查看vur-router后端配置例子

地址:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

以上内容于 2019-07-25 修改。

以下内容于 2019-04-23 修改。

如果你是使用脚手架初始化环境,可以跳过这部分。如果自己配置webpack,可以接着看确定做了如下配置

devServer: {   ...   contentBase: false, //必须   historyApiFallback: true, //必须   ... }, entry: {     app: ['./src/main.js'],     vendors: ['vue', 'vue-router'] //注意这里 }, plugins: [   ....   new HtmlWebpackPlugin({     ...     chunks: ['vendors', 'app'], //注意这里,这里的chunks 要包含入口的 entry   }) ]

以上内容于2019-04-23修改。

场景一:IE9(兼容性问题)

严格来说不是白屏的问题,应该说是兼容性问题,直接就是不支持,报错了,渲染无法执行造成的。解决方式就是

npm i babel-polyfill -D

然后在入口mian.js引入就完事了,就着么简单

import "babel-polyfill";

或者

//webpack entry: {       app: ['babel-polyfill','./src/main.js'],       vendors: ['vue', 'vue-router'] },

以下内容于2019-04-23修改。

假如真的是js兼容性问题,那么真的只是引入babel-polyfill或者在webpack入口加入babel-polyfill问题就能解决吗,其实不一定的,这个要看项目的使用情况。babel-polyfill不是万能的。那么如何排查兼容性问题呢(假如真的是兼容性问题)。因为我们在手机上直接调试,有些错误不会那么容易显而易见。我是这么调试的。(仅供参考!)

<template>   <div>     <!-- 错误直接显示在这里. 不用 alert() ,console.log()  -->     {{error}} ...     <!-- other element -->   </div> </template> <script>   export default{     data{       return {         error:''       }     },     moundted:{       try{         //一些请求数据的方法       }catch(e){         //这里抛出异常         this.error = e       }     }   } </script>

这里要说的是有些兼容性问题是bable-polyfill搞不定的。比如URLSearchParams

let data = new URLSearchParams(); for (var key in params) {   data.append(key, params[key]); }

那么肯定会报URLSearchParams is not undefined,然后,错误只在一些低端的机型,一些偶然的场合出错.加大了错误的排查。

以下可以解决URLSearchParams is not undefined

//# console npm i url-search-params-polyfill  //# mian.js import 'url-search-params-polyfill';

以上内容于2019-04-23修改。

场景二 :如下图

有人说是在iphone 5s或者6s上会出现这种问题,肯定不是手机的bug。于是我重现了场景,真的和设备无关

深入解析vue中路由切换白屏的问题(附代码)

所以这个跟设备真的没有关系。知道问题所在,当然解决办法也有许多

方案一:暴力愚蠢型

//路由跳转前滚动条清零 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方法接收tofrom路由对象。第三个参数savedPosition当且仅当popstate导航(通过浏览器的前进/后退按钮触发) 时才可用。

所以假如要解决白屏的问题,可以着么干

const router = new VueRouter({   routes: [...],   scrollBehavior (to, from, savedPosition) {     return savedPosition || { x: 0, y: 0 }   } })

也就是说,当用户点击返回、前进的时候,页面会滚动到之前位置,(微信朋友圈的文章就是这样的,读一半返回,再进来接着刚才的位置阅读)

如果是新的pagemounted进来的时候,就重置为 0

完美的解决了这个问题。

但是这也是个问题,框架为什么不默认呢,假如自定义的时候可以overwirte

场景三: 缓存的原因(2019.4.15)

我们根据版本号(或者hash)去控制缓存问题,当我们发布新版本,会发现html里面引用的版本号却是旧的版本号 ,这种情况是入口index.html文件被缓存了,很多时候我们设置禁止html文件被缓存,但依然会出现被缓存的情况。比如在头部加

<meta http-equiv="Expires" content="0" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-control" content="no-cache" /> <meta http-equiv="Cache" content="no-cache" />

仍然解决不了问题,关于web的缓存策略,推荐这篇文章:Http缓存机制

一旦index.html被缓存了,之后我们使用了全量更新,也就是每次发版本之前会干掉之前的jscss文件,那么被缓存的index.html会无法加载之前旧的js,css还有一些其他的静态资源文件,而新的jscss则不会被加载,那么白屏就诞生了。

这个时候我们就要配合服务端来解决index.html的缓存问题

解决缓存的问题请转到这里:Vue index.html入口缓存问题

[完]

推荐学习:vue.js教程

赞(1)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号