之前的文章《浅析vue中complie数据双向绑定原理（代码详解）》中，给大家了解了vue中complie数据双向绑定原理。下面本篇文章给大家了解vue中路由切换白屏的问题，伙伴们来看看。
关于vue路由切换的白屏，事实上在开发的过程中，我一直没有遇到过。
我有个哥们遇到这个问题，问我怎么解决的，我晕了，我没遇到这样的问题啊，我怎么解决啊啊啊啊。。
事实上是遇到过一回的。 
以下内容于 2019-07-25 修改。
服务器部署配置问题
这个问题造成的白屏体现在：
首页可以正常浏览，但是------通过$router.push('/home')跳转页面 正常，然后刷新就是白屏或 404
本不想在文章加入这个问题和解决方案，因为官网已经提供了正确的部署姿势，（vue 的路由模式自行查看文档），主要是针对html5 history模式：
const router = new vuerouter({ mode: 'history', routes: [...]})
dev和build都没有问题，这个是肯定的，所以问题就出在服务器配置上，以nginx为例，正确的配置如下：
location / { .... try_files $uri $uri/ /index.html; #重点}
apache，原生 node.js，iis，caddy，firebase 主机
请查看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";
或者
//webpackentry: { 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
//# consolenpm i url-search-params-polyfill//# mian.jsimport 'url-search-params-polyfill';
以上内容于2019-04-23修改。
场景二 ：如下图
有人说是在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。
场景三: 缓存的原因（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被缓存了，之后我们使用了全量更新，也就是每次发版本之前会干掉之前的js和css文件，那么被缓存的index.html会无法加载之前旧的js,css还有一些其他的静态资源文件，而新的js和css则不会被加载,那么白屏就诞生了。
这个时候我们就要配合服务端来解决index.html的缓存问题
解决缓存的问题请转到这里：vue index.html入口缓存问题
[完]
推荐学习：vue.js教程
以上就是深入解析vue中路由切换白屏的问题（附代码）的详细内容。