深入解析vue中路由切換白螢幕的問題（附程式碼）
- 奋力向前轉載
- 2021-08-24 10:54:424863瀏覽
在
先前的文章《淺析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#後端配置範例
以上內容於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。於是我重現了場景，真的跟設備無關
所以這個跟設備真的沒有關係。知道問題所在，當然解決辦法也有許多
方案一：暴力愚蠢型
//路由跳转前滚动条清零
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中路由切換白螢幕的問題（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！