Eingehende Analyse des White-Screen-Problems beim Routing-Switching in Vue (mit Code)

Im vorherigen Artikel „Eine kurze Analyse des bidirektionalen Bindungsprinzips von Complie-Daten in Vue (detaillierte Codeerklärung)“ haben wir etwas über das bidirektionale Bindungsprinzip von Complie-Daten in Vue erfahren. Der folgende Artikel hilft Ihnen, das Problem des weißen Bildschirms beim Routing in Vue zu verstehen.

Was den weißen Bildschirm beim Routing-Switching in vue betrifft, so bin ich während des Entwicklungsprozesses tatsächlich noch nie darauf gestoßen. 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";

或者

//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:&#39;&#39;
      }
    },
    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。于是我重现了场景，真的和设备无关

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

方案一：暴力愚蠢型

//路由跳转前滚动条清零
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

Ich habe einen Kumpel, der auf dieses Problem gestoßen ist und mich gefragt hat, wie ich es lösen kann. Ich bin noch nie auf ein solches Problem gestoßen. . 🎜🎜Tatsächlich bin ich einmal darauf gestoßen. 🎜🎜🎜Der folgende Inhalt wurde am 25.07.2019 geändert. 🎜🎜🎜Problem bei der Serverbereitstellungskonfiguration🎜🎜Der durch dieses Problem verursachte weiße Bildschirm spiegelt sich wider in: 🎜🎜Die Homepage kann normal durchsucht werden, aber ------über $router. push('/ home')Die Seite springt normal und wird dann aktualisiert, um einen weißen Bildschirm oder 404 zu erhalten🎜🎜Ich wollte dieses Problem und diese Lösung nicht in den Artikel aufnehmen, da die offizielle Website dies bereitgestellt hat korrekte Bereitstellungshaltung (Vue Überprüfen Sie selbst die Dokumentation für den Routing-Modus), hauptsächlich für den HTML5-Verlauf-Modus: 🎜

<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" />

🎜 Es ​​gibt kein Problem mit dev und build, das ist sicher, das Problem liegt also in der Serverkonfiguration. Am Beispiel von nginx ist die richtige Konfiguration wie folgt: 🎜rrreee 🎜Apache, nativer Node.js, IIS, Caddy, Firebase-Host🎜 🎜🎜Bitte schauen Sie sich das Backend-Konfigurationsbeispiel für vur-router an🎜🎜 Adresse: 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🎜🎜🎜🎜Der obige Inhalt wurde am 25.07.2019 geändert. 🎜🎜🎜🎜Der folgende Inhalt wurde am 23.04.2019 geändert. 🎜🎜🎜Wenn Sie eine Scaffolding-Initialisierungsumgebung verwenden, können Sie diesen Teil überspringen. Wenn Sie webpack selbst konfigurieren, können Sie überprüfen und sicherstellen, dass Sie die folgende Konfiguration vorgenommen haben🎜rrreee🎜🎜Der obige Inhalt wurde am 23.04.2019 geändert. 🎜🎜

Szenario 1: IE9 (Kompatibilitätsproblem)

🎜Genau genommen handelt es sich nicht um ein Problem mit dem weißen Bildschirm. Es handelt sich einfach um ein Kompatibilitätsproblem. Es wird ein Fehler gemeldet. und das Rendering kann nicht ausgeführt werden. Die Lösung besteht darin, 🎜rrreee🎜 zu verwenden und es dann am Eingang in main.js zu importieren. Es ist so einfach wie 🎜rrreee🎜🎜Der folgende Inhalt wurde am 23.04.2019 geändert. 🎜🎜🎜Wenn es wirklich ein js-Kompatibilitätsproblem ist, dann muss es wirklich nur babel-polyfill einführen oder babel zum <code>webpack hinzufügen. code>-Eintrag Kann -polyfill das Problem lösen? Tatsächlich hängt dies nicht unbedingt von der Verwendung des Projekts ab. babel-polyfill ist kein Allheilmittel. So beheben Sie Kompatibilitätsprobleme (falls es sich wirklich um ein Kompatibilitätsproblem handelt). Da wir das Debugging direkt am Telefon durchführen, sind einige Fehler nicht so leicht zu erkennen. So habe ich es debuggt. (Nur als Referenz!) 🎜rrreee🎜Was ich hier sagen möchte, ist, dass es einige Kompatibilitätsprobleme gibt, die bable-polyfill nicht lösen kann. Beispielsweise wird URLSearchParams🎜rrreee🎜 definitiv melden, dass URLSearchParams nicht undefiniert ist. Dann tritt der Fehler nur bei einigen Low-End-Modellen und gelegentlich auf wird erhöht. 🎜🎜Das Folgende kann das Problem lösen: URLSearchParams ist nicht undefiniert🎜rrreee🎜🎜Der obige Inhalt wurde am 23.04.2019 geändert. 🎜🎜🎜Szenario 2: Wie unten gezeigt🎜🎜Einige Leute sagen, dass dieses Problem auf dem iPhone 5s oder 6s auftritt. Es handelt sich definitiv nicht um einen Fehler des Telefons. Also habe ich die Szene reproduziert, sie hat wirklich nichts mit dem Gerät zu tun🎜🎜🎜🎜Das hat also wirklich nichts mit dem Gerät zu tun. Wenn man das Problem kennt, gibt es natürlich viele Lösungen 🎜🎜Option 1: Gewalttätiger und dummer Typ🎜rrreee🎜Option 2: Machbar, aber nicht optional🎜rrreee🎜Obwohl es machbar ist , es fühlt sich ein bisschen dumm an, was du tust. Da es eine bessere Schreibweise gibt, ist diese Schreibweise eleganter geschaltet. scrollBehavior🎜🎜Verwendung wie folgt: 🎜rrreee🎜Die scrollBehavior-Methode empfängt to- und from-Routingobjekte. Der dritte Parameter savedPosition ist nur bei der popstate-Navigation verfügbar (ausgelöst durch die Vorwärts-/Zurück-Schaltflächen des Browsers). 🎜🎜Wenn Sie also das Problem des weißen Bildschirms lösen möchten, was können Sie dann tun? Momente, halb gelesen. Gehen Sie zurück, kommen Sie dann herein und lesen Sie von der vorherigen Position aus weiter >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教程

Das obige ist der detaillierte Inhalt vonEingehende Analyse des White-Screen-Problems beim Routing-Switching in Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!