Home >Web Front-end >Vue.js >In-depth analysis of the white screen problem of routing switching in Vue (with code)
In the previous article "A brief analysis of the two-way binding principle of complie data in vue (detailed code explanation)", we learned about the two-way binding principle of complie data in vue. The following article will help you understand the problem of white screen when routing in Vue. Let’s take a look.
Regarding the white screen of vue
routing switching, in fact, I have never encountered it during the development process.
A friend of mine encountered this problem and asked me how to solve it. I fainted. I have never encountered such a problem. How can I solve it? .
In fact, I encountered it once.
The following content was modified on 2019-07-25.
Server deployment configuration problem
The white screen caused by this problem is as follows:
The homepage can be browsed normally, but---- --Passing $router.push('/home')
jumps to the page normally, and then refreshes to get a white screen or 404
I didn’t want to include this problem and solution in the article, because the official website The correct deployment posture has been provided (check the documentation for the routing mode of Vue
), mainly for the HTML5 History
mode:
const router = new VueRouter({ mode: 'history', routes: [...] })
dev## There is no problem with # and
build, this is for sure, so the problem lies in the server configuration. Taking
nginx as an example, the correct configuration is as follows:
location / { .... try_files $uri $uri/ /index.html; #重点 }
Apache, native
Node.js,
IIS,
Caddy,
Firebase Host
Please seevur-router
Address: https://router.vuejs.org/zh/guide/essentials/history-mode.html#Backend configuration ExampleBackend configuration example
The above content was modified on 2019-07-25.
The following content was modified on 2019-04-23.If you are using
scaffolding initialization environment, you can skip this part. If you configure webpack yourself, you can check and make sure you have done the following configuration
devServer: { ... contentBase: false, //必须 historyApiFallback: true, //必须 ... }, entry: { app: ['./src/main.js'], vendors: ['vue', 'vue-router'] //注意这里 }, plugins: [ .... new HtmlWebpackPlugin({ ... chunks: ['vendors', 'app'], //注意这里,这里的chunks 要包含入口的 entry }) ]
The above content was modified on 2019-04-23.Scenario 1: IE9 (compatibility issue) Strictly speaking, it is not a white screen issue. It should be said to be a compatibility issue. It simply does not support it, an error is reported, and rendering cannot be done. caused by execution. The solution is
npm i babel-polyfill -Dand then import it into main.js at the entrance. It’s as simple as
import "babel-polyfill";or
//webpack entry: { app: ['babel-polyfill','./src/main.js'], vendors: ['vue', 'vue-router'] },
. The following content is in 2019 -04-23 modified.If it is really a
js compatibility issue, then it really just needs to introduce
babel-polyfill or add it at the
webpack entrance
babel-polyfillWill the problem be solved? In fact, not necessarily. This depends on the usage of the project.
babel-polyfill is not a panacea. So how to troubleshoot compatibility issues (if it is really a compatibility issue). Because we are debugging directly on the phone, some errors will not be so easily obvious. This is how I debugged it. (For reference only!)
<template> <div> <!-- 错误直接显示在这里. 不用 alert() ,console.log() --> {{error}} ... <!-- other element --> </div> </template> <script> export default{ data{ return { error:'' } }, moundted:{ try{ //一些请求数据的方法 }catch(e){ //这里抛出异常 this.error = e } } } </script>What I want to say here is that there are some compatibility issues that
bable-polyfill cannot solve. For example,
URLSearchParams
let data = new URLSearchParams(); for (var key in params) { data.append(key, params[key]); }will definitely report
URLSearchParams is not undefined. Then, the error will only occur on some low-end models and on some occasional occasions. Increase the size Error troubleshooting.
URLSearchParams is not undefined
//# console npm i url-search-params-polyfill //# mian.js import 'url-search-params-polyfill';
The above content was modified on 2019-04-23.Scenario 2: As shown belowSome people say that this problem occurs on iPhone 5s or 6s. It is definitely not a bug of the phone. So I recreated the scene, and it really had nothing to do with the equipment So this really had nothing to do with the equipment. Knowing the problem, of course there are many solutions
Option 1: Violent and stupid type
//路由跳转前滚动条清零 document.body.scrollTop = document.documentElement.scrollTop = 0; this.$router.push({ path: "/a/b/c" });
Option 2: Feasible but not optional
//给router 加一个监听,一旦改变,执行清零,然后再跳转 let routers = new Router({.....}) routers.beforeEach(function (to, from, next) { ...... document.body.scrollTop = document.documentElement.scrollTop = 0 next() })Although it is feasible, it feels a bit stupid to do it. Because there is a better way of writing, this way of writing is more elegant
Option 3: Best Type
In fact, the official has provided the ability to control the scroll position when the route is switched. The way.scrollBehavior
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 { x: number, y: number } | { selector: string } | } })
scrollBehavior method receives
to and
from routing objects . The third parameter
savedPosition is available if and only if
popstate navigation (triggered by the browser's forward/back buttons).
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { return savedPosition || { x: 0, y: 0 } } })That is to say, when the user clicks return or forward, the page will scroll to the previous position, (WeChat Moments The article is like this. Go back after reading half of it, then come in and continue reading from the previous position) If it is a new
page that is
mounted, it will be reset. is
0.
完美的解决了这个问题。
但是这也是个问题,框架为什么不默认呢,假如自定义的时候可以overwirte
。
我们根据版本号(或者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教程
The above is the detailed content of In-depth analysis of the white screen problem of routing switching in Vue (with code). For more information, please follow other related articles on the PHP Chinese website!