Vue でのルーティング切り替えの白い画面問題の詳細な分析 (コード付き)

前回の記事「vue における complie データの双方向バインディング原則の簡単な分析 (詳細なコード説明)」では、complie の双方向バインディング原則について学びました。 vue内のデータ。次の記事は、Vue でルーティングするときに白い画面が表示される問題を理解するのに役立ちます。

vue ルーティング切り替えの白い画面ですが、実は開発中に一度も遭遇したことがありません。

私の友人がこの問題に遭遇し、解決方法を尋ねてきました。私は気を失いました。このような問題に遭遇したことはありません。どうすれば解決できますか? 。

実は、私も一度遭遇したことがあります。

以下の内容は 2019 年 7 月 25 日に変更されました。

サーバー展開構成の問題

この問題による白い画面は次のとおりです。

ホームページは正常に閲覧できますが、 ---- --$router.push('/home') を渡すと、通常どおりページにジャンプし、更新すると白い画面または 404

が表示されます。この問題と解決策を記事に含めるのは、公式 Web サイトの正しい展開姿勢が提供されているためです (Vue のルーティング モードについてはドキュメントを確認してください)。主に HTML5 の歴史 モード:

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

dev と build には問題はありませんが、これは間違いなく、問題はサーバー構成にあります。 ## 例として、正しい構成は次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">location / { .... try_files $uri $uri/ /index.html; #重点 }</pre><div class="contentsignin">ログイン後にコピー</div></div>

Apache

、ネイティブ Node.js、IIS、 Caddy、Firebase Host

vur-router

バックエンド構成例を参照してください。アドレス: https://router. vuejs.org/zh/guide/essentials/history-mode.html#バックエンド構成の例

上記の内容は 2019 年 7 月 25 日に変更されました。

以下の内容は 2019 年 4 月 23 日に変更されました。

スキャフォールディング初期化環境

を使用している場合は、この部分をスキップできます。 webpack を自分で設定する場合は、次の設定が完了していることを確認してください。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">devServer: { ... contentBase: false, //必须 historyApiFallback: true, //必须 ... }, entry: { app: [&amp;#39;./src/main.js&amp;#39;], vendors: [&amp;#39;vue&amp;#39;, &amp;#39;vue-router&amp;#39;] //注意这里 }, plugins: [ .... new HtmlWebpackPlugin({ ... chunks: [&amp;#39;vendors&amp;#39;, &amp;#39;app&amp;#39;], //注意这里,这里的chunks 要包含入口的 entry }) ]</pre><div class="contentsignin">ログイン後にコピー</div></div>

上記の内容は 2019 年 4 月 23 日に変更されました。

シナリオ 1: IE9 (互換性の問題)

厳密に言えば、これは白い画面の問題ではなく、互換性の問題であると言われるべきです。単にサポートしていないだけです。 、実行が原因でエラーが報告され、レンダリングを実行できません。解決策は、

npm i babel-polyfill -D

を実行し、入り口で main.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 unknown

を報告しますが、このエラーは一部のローエンド モデルでのみ発生し、場合によっては発生することもあります。サイズを大きくしてください。エラーのトラブルシューティングです。

以下は解決できますURLSearchParams は未定義ではありません

//# console
npm i url-search-params-polyfill

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

上記の内容は 2019 年 4 月 23 日に変更されました。

シナリオ 2: 以下に示すように

この問題は iPhone 5s または 6s で発生するという人もいますが、これは決して電話機のバグではありません。そこでシーンを再現しましたが、実際には機器とは何の関係もありませんでした。

つまり、これは実際には機器とは何の関係もありませんでした。問題を知っていれば、もちろん解決策はたくさんあります。

オプション 1: 暴力的で愚かなタイプ

//路由跳转前滚动条清零
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.$router.push({ path: "/a/b/c" });

オプション 2: 実行可能ですがオプションではありません

//给router 加一个监听，一旦改变，执行清零，然后再跳转
let routers = new Router({.....})
routers.beforeEach(function (to, from, next) {
    ......
    document.body.scrollTop = document.documentElement.scrollTop = 0
    next()
})

実現可能ではありますが、それを行うのは少し愚かな気がします。もっと良い書き方があるので、この書き方の方がエレガントです

オプション 3: 最適なタイプ

実際、公式は制御する機能を提供しています。ルート切り替え時のスクロール位置の変更方法。 scrollBehavior

は次のように使用されます:

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置 { x: number, y: number } |  { selector: string } |
  }
})

scrollBehavior

メソッドは

to および from ルーティングを受け取りますオブジェクト。 3 番目のパラメータ savedPosition は、popstate ナビゲーション (ブラウザの進む/戻るボタンによってトリガーされる) の場合にのみ使用できます。 それでは、白い画面の問題を解決したい場合、何ができるでしょうか

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

つまり、ユーザーが「戻る」または「進む」をクリックすると、ページは前の位置までスクロールします。 , (WeChat Moments 記事はこんな感じです。半分読んだら戻って、入ってきて前の位置から読み続けてください)

新しい

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 でのルーティング切り替えの白い画面問題の詳細な分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。