這篇文章主要介紹“vue中路由切換出現(xiàn)白屏的問題怎么解決”，在日常操作中，相信很多人在vue中路由切換出現(xiàn)白屏的問題怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中路由切換出現(xiàn)白屏的問題怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、古交網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場景定制、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為古交等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

服務(wù)器部署配置問題

這個(gè)問題造成的白屏體現(xiàn)在：

首頁可以正常瀏覽，但是------通過$router.push('/home')跳轉(zhuǎn)頁面 正常，然后刷新就是白屏或 404

本不想在文章加入這個(gè)問題和解決方案，因?yàn)楣倬W(wǎng)已經(jīng)提供了正確的部署姿勢，（Vue 的路由模式自行查看文檔），主要是針對HTML5 History模式：

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

dev和build都沒有問題，這個(gè)是肯定的，所以問題就出在服務(wù)器配置上，以nginx為例，正確的配置如下：

location / {
  ....
  try_files $uri $uri/ /index.html; #重點(diǎn)
}

Apache，原生 Node.js，IIS，Caddy，Firebase 主機(jī)

請查看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

如果你是使用腳手架初始化環(huán)境，可以跳過這部分。如果自己配置webpack，可以接著看確定做了如下配置

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

場景一：IE9（兼容性問題）

嚴(yán)格來說不是白屏的問題，應(yīng)該說是兼容性問題，直接就是不支持，報(bào)錯(cuò)了，渲染無法執(zhí)行造成的。解決方式就是

npm i babel-polyfill -D

然后在入口mian.js引入就完事了，就著么簡單

import "babel-polyfill";

或者

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

假如真的是js兼容性問題，那么真的只是引入babel-polyfill或者在webpack入口加入babel-polyfill問題就能解決嗎，其實(shí)不一定的，這個(gè)要看項(xiàng)目的使用情況。babel-polyfill不是萬能的。那么如何排查兼容性問題呢（假如真的是兼容性問題）。因?yàn)槲覀冊谑謾C(jī)上直接調(diào)試,有些錯(cuò)誤不會那么容易顯而易見。我是這么調(diào)試的。（僅供參考?。?/p>

<template>
  <div>
    <!-- 錯(cuò)誤直接顯示在這里. 不用 alert() ,console.log()  -->
    {{error}} ...
    <!-- other element -->
  </div>
</template>
<script>
  export default{
    data{
      return {
        error:''
      }
    },
    moundted:{
      try{
        //一些請求數(shù)據(jù)的方法
      }catch(e){
        //這里拋出異常
        this.error = e
      }
    }
  }
</script>

這里要說的是有些兼容性問題是bable-polyfill搞不定的。比如URLSearchParams

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

那么肯定會報(bào)URLSearchParams is not undefined，然后，錯(cuò)誤只在一些低端的機(jī)型，一些偶然的場合出錯(cuò).加大了錯(cuò)誤的排查。

以下可以解決URLSearchParams is not undefined

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

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

場景二 ：如下圖

有人說是在iphone 5s或者6s上會出現(xiàn)這種問題，肯定不是手機(jī)的bug。于是我重現(xiàn)了場景，真的和設(shè)備無關(guān)

所以這個(gè)跟設(shè)備真的沒有關(guān)系。知道問題所在，當(dāng)然解決辦法也有許多

方案一：暴力愚蠢型

//路由跳轉(zhuǎn)前滾動條清零
document.body.scrollTop = document.documentElement.scrollTop = 0;
this.$router.push({ path: "/a/b/c" });

方案二：可行但不可選型

//給router 加一個(gè)監(jiān)聽，一旦改變，執(zhí)行清零，然后再跳轉(zhuǎn)
let routers = new Router({.....})
routers.beforeEach(function (to, from, next) {
    ......
    document.body.scrollTop = document.documentElement.scrollTop = 0
    next()
})

雖然可行，但是感覺著么干有點(diǎn)愚蠢。因?yàn)檫€有更好的寫法，這個(gè)寫法更佳優(yōu)雅

方案三：最佳型

其實(shí)官方已經(jīng)提供了當(dāng)路由切換時(shí)，控制滾動位置的方式。scrollBehavior

使用方式如下：

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

scrollBehavior方法接收to和from路由對象。第三個(gè)參數(shù)savedPosition當(dāng)且僅當(dāng)popstate導(dǎo)航（通過瀏覽器的前進(jìn)/后退按鈕觸發(fā)） 時(shí)才可用。

所以假如要解決白屏的問題，可以著么干

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

也就是說，當(dāng)用戶點(diǎn)擊返回、前進(jìn)的時(shí)候，頁面會滾動到之前位置，（微信朋友圈的文章就是這樣的，讀一半返回，再進(jìn)來接著剛才的位置閱讀）

如果是新的page被mounted進(jìn)來的時(shí)候，就重置為 0 。

完美的解決了這個(gè)問題。

但是這也是個(gè)問題，框架為什么不默認(rèn)呢，假如自定義的時(shí)候可以overwirte。

場景三: 緩存的原因（2019.4.15）

我們根據(jù)版本號（或者hash）去控制緩存問題,當(dāng)我們發(fā)布新版本，會發(fā)現(xiàn)html里面引用的版本號卻是舊的版本號 ，這種情況是入口index.html文件被緩存了，很多時(shí)候我們設(shè)置禁止html文件被緩存，但依然會出現(xiàn)被緩存的情況。比如在頭部加

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

一旦index.html被緩存了，之后我們使用了全量更新，也就是每次發(fā)版本之前會干掉之前的js和css文件，那么被緩存的index.html會無法加載之前舊的js,css還有一些其他的靜態(tài)資源文件，而新的js和css則不會被加載,那么白屏就誕生了。

到此，關(guān)于“vue中路由切換出現(xiàn)白屏的問題怎么解決”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

名稱欄目：vue中路由切換出現(xiàn)白屏的問題怎么解決
地址分享：http://www.yijiale78.com/article12/pjdddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、手機(jī)網(wǎng)站建設(shè)、定制開發(fā)、做網(wǎng)站、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)