Vue에서 라우팅 전환의 흰색 화면 문제에 대한 심층 분석(코드 포함)

이전 글 "Vue에서 complie 데이터의 양방향 바인딩 원리에 대한 간략한 분석(상세 코드 설명)"에서 Vue에서 complie 데이터의 양방향 바인딩 원리에 대해 배웠습니다. 다음 글은 Vue에서 라우팅할 때 흰색 화면이 나타나는 문제를 이해하는 데 도움이 될 것입니다.

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

或者

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

친구가 이 문제를 겪고 어떻게 해결하는지 물었습니다. 저는 그런 문제를 겪어본 적이 없습니다. . 🎜🎜실제로 한 번 접한 적이 있습니다. 🎜🎜🎜2019-07-25에 다음 내용이 수정되었습니다. 🎜🎜🎜서버 배포 구성 문제🎜🎜이 문제로 인해 발생하는 흰색 화면은 다음과 같습니다. 🎜🎜홈페이지는 정상적으로 탐색할 수 있지만 ------$router를 통해. push('/ home')페이지가 정상적으로 점프한 다음 새로 고쳐져 흰색 화면이나 404가 나타납니다🎜🎜이 문제와 해결 방법을 기사에 포함하고 싶지 않았습니다. 공식 웹사이트에서 올바른 배포 상태(Vue 라우팅 모드에 대한 문서를 직접 확인하세요), 주로 HTML5 기록 모드에 대해: 🎜

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

🎜 dev에는 문제가 없습니다. 및 build는 확실하므로 문제는 서버 구성에 있습니다. nginx를 예로 들면 올바른 구성은 다음과 같습니다. 🎜rrreee 🎜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을 직접 구성하시면 아래와 같은 구성이 되었는지 확인하실 수 있습니다🎜rrreee🎜🎜위 내용은 2019-04-23에 수정되었습니다. 🎜🎜

시나리오 1: IE9(호환성 문제)

🎜엄밀히 말하면 흰색 화면 문제는 아니고 단순히 호환성 문제라고 해야 할까요. 렌더링을 실행할 수 없습니다. 해결책은 🎜rrreee🎜 다음 입구에서 main.js로 가져오는 것입니다. 🎜rrreee🎜 또는
🎜rrreee🎜🎜다음 내용은 2019-04-23에 수정되었습니다. 🎜🎜🎜정말 js 호환성 문제라면 babel-polyfill을 도입하거나 babel을 <code>webpack에 추가하면 됩니다. code> 항목 -polyfill을 사용하면 문제를 해결할 수 있습니까? 실제로는 프로젝트 사용법에 따라 해결되지 않을 수도 있습니다. babel-polyfill은 만병통치약이 아닙니다. 따라서 호환성 문제를 해결하는 방법(실제로 호환성 문제인 경우) 우리는 전화로 직접 디버깅하고 있기 때문에 일부 오류는 쉽게 눈에 띄지 않습니다. 이것이 내가 디버깅한 방법입니다. (참고용!) 🎜rrreee🎜여기서 제가 말씀드리고 싶은 것은 bable-polyfill이 해결할 수 없는 호환성 문제가 있다는 것입니다. 예를 들어, URLSearchParams🎜rrreee🎜는 확실히 URLSearchParams가 정의되지 않았습니다라고 보고합니다. 그러면 오류는 일부 저가형 모델에서만 발생하며 가끔 오류가 발생합니다. 조사가 늘어날 예정이다. 🎜🎜다음 방법으로 URLSearchParams가 정의되지 않음 문제를 해결할 수 있습니다.🎜rrreee🎜🎜위 내용은 2019-04-23에 수정되었습니다. 🎜🎜🎜시나리오 2: 아래와 같습니다🎜🎜어떤 사람들은 이 문제가 iPhone 5s 또는 6s에서 발생한다고 말합니다. 이것은 확실히 휴대폰의 버그가 아닙니다. 그래서 그 장면을 재현해보았는데, 기기와는 전혀 관련이 없습니다🎜🎜🎜🎜이건 기기와는 전혀 관련이 없습니다. 문제를 알면 당연히 해결 방법은 많습니다 🎜🎜옵션 1: 폭력적이고 멍청한 유형🎜rrreee🎜옵션 2: 가능하지만 선택 사항은 아님🎜rrreee🎜가능하지만 , 당신이 하고 있는 일이 좀 멍청한 것 같아요. 더 나은 글쓰기 방식이 있기 때문에 이 글쓰기 방식이 더 우아합니다🎜🎜옵션 3: 최적의 유형🎜🎜사실 공식에서는 경로가 다음과 같을 때 스크롤 위치를 제어하는 ​​방법을 제공했습니다. 전환되었습니다. scrollBehavior🎜🎜사용 방법은 다음과 같습니다. 🎜rrreee🎜 scrollBehavior 메서드는 to 및 from 라우팅 객체를 수신합니다. 세 번째 매개변수 savedPosition은 popstate 탐색(브라우저의 앞으로/뒤로 버튼에 의해 트리거됨)인 경우에만 사용할 수 있습니다. 🎜🎜흰색 화면 문제를 해결하고 싶다면 어떻게 해야 할까요🎜rrreee🎜즉, 사용자가 뒤로 또는 앞으로를 클릭하면 페이지가 이전 위치로 스크롤됩니다. (이것은 WeChat의 기사입니다. 순간, 반 읽기 뒤로 갔다가 들어와 이전 위치부터 계속 읽기) 🎜🎜새 페이지가 마운트되어 들어오면 로 재설정됩니다. >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 중국어 웹사이트의 기타 관련 기사를 참조하세요!