Analisis mendalam tentang masalah skrin putih penukaran penghalaan dalam Vue (dengan kod)

Dalam artikel sebelumnya "Analisis ringkas tentang prinsip pengikatan dua hala data pematuhan dalam Vue (penjelasan kod terperinci) ", kami mengetahui tentang prinsip pengikatan dua hala bagi complie data dalam Vue. Artikel berikut akan membantu anda memahami masalah skrin putih semasa membuat penghalaan dalam Vue.

Berkenaan vue skrin putih semasa menukar laluan, sebenarnya saya tidak pernah menemuinya semasa proses pembangunan.

Seorang kawan saya menghadapi masalah ini dan bertanya kepada saya bagaimana untuk menyelesaikannya. Saya tidak pernah mengalami masalah seperti itu. .

Malah, saya pernah mengalaminya sekali.

Kandungan berikut telah diubah suai pada 25-07-2019.

Masalah konfigurasi penggunaan pelayan

Skrin putih yang disebabkan oleh masalah ini adalah seperti berikut:

Halaman utama boleh dilayari seperti biasa, tetapi ---- --Melompat halaman melalui $router.push('/home') adalah perkara biasa, dan kemudian menyegarkannya akan menghasilkan skrin putih atau 404

Saya tidak mahu memasukkan masalah dan penyelesaian ini dalam artikel, kerana tapak web rasmi telah menyediakan postur penggunaan yang betul, (Vue Semak dokumentasi untuk mod penghalaan), terutamanya untuk mod HTML5 History:

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

dev dan build kedua-duanya baik. Ini sudah pasti, jadi masalahnya terletak pada konfigurasi pelayan nginx Contohnya, konfigurasi yang betul adalah seperti berikut:

location / {
  ....
  try_files $uri $uri/ /index.html; #重点
}

Apache, asli Node.js, IIS, <. 🎜>, Caddy hos Firebase

Sila lihat

Contoh konfigurasi belakangvur-router

Alamat: https://router.vuejs.org/zh/guide/essentials/history- mod.html#Contoh konfigurasi belakang

Kandungan di atas telah diubah suai pada 25-07-2019.

Kandungan berikut telah diubah suai pada 23-04-2019.

Jika anda menggunakan

persekitaran permulaan perancah, anda boleh melangkau bahagian ini. Jika anda mengkonfigurasi sendiri, anda boleh menyemak dan memastikan anda telah mengkonfigurasi yang berikut webpack

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

Kandungan di atas telah diubah suai pada 23-04-2019.

Senario 1: IE9 (isu keserasian)

Tegasnya, ia bukan isu skrin putih Ia sepatutnya dikatakan sebagai isu keserasian. ralat dilaporkan, dan rendering tidak dapat dilakukan disebabkan oleh pelaksanaan. Penyelesaiannya ialah

npm i babel-polyfill -D

dan kemudian importnya ke main.js di pintu masuk semudah

import "babel-polyfill";

atau

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

.

Kandungan berikut telah diubah suai pada 23-04-2019.

Jika ia benar-benar masalah keserasian

, adakah masalah itu benar-benar boleh diselesaikan dengan hanya memperkenalkan js atau menambah babel-polyfill pada entri webpack sebenarnya tidak semestinya berlaku. Ia bergantung kepada penggunaan projek. babel-polyfillIa bukan ubat penawar. Jadi bagaimana untuk menyelesaikan masalah keserasian (jika ia benar-benar isu keserasian). Oleh kerana kami sedang menyahpepijat terus pada telefon, beberapa ralat tidak akan kelihatan begitu mudah. Ini adalah cara saya menyahpenyahnya. (Untuk rujukan sahaja!) 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>

Apa yang saya ingin katakan di sini ialah terdapat beberapa isu keserasian yang

tidak dapat diselesaikan. Contohnya, bable-polyfillURLSearchParams

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

pasti akan melaporkan

Kemudian, ralat hanya berlaku dalam beberapa model rendah dan dalam beberapa kejadian yang tidak disengajakan. URLSearchParams is not undefined

Perkara berikut boleh diselesaikan

URLSearchParams is not undefined

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

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

Kandungan di atas telah diubah suai pada 23-04-2019.

Senario 2: Seperti yang ditunjukkan di bawah

Sesetengah orang mengatakan bahawa masalah ini berlaku pada iPhone 5s atau 6s Ia pastinya bukan pepijat telefon. Jadi saya mencipta semula adegan itu, dan ia benar-benar tiada kaitan dengan peralatan

Jadi ia benar-benar tiada kaitan dengan peralatan. Mengetahui masalah itu, sudah tentu terdapat banyak penyelesaian

Pilihan 1: Jenis ganas dan bodoh

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

Pilihan 2: Boleh tetapi bukan pilihan

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

Walaupun boleh, rasanya agak mengarut untuk melakukannya. Kerana ada cara penulisan yang lebih baik, cara penulisan ini lebih elegan

Pilihan 3: Jenis terbaik

Malah, pegawai telah menyediakan keupayaan untuk mengawal kedudukan tatal apabila laluan dialihkan.

scrollBehavior

digunakan seperti berikut: Kaedah

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

menerima scrollBehavior dan to objek laluan. Parameter ketiga from tersedia jika dan hanya jika navigasi savedPosition (dicetuskan melalui butang hadapan/belakang penyemak imbas). popstate

Jadi jika anda ingin menyelesaikan masalah skrin putih, apakah yang anda boleh lakukan

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

Dengan kata lain, apabila pengguna mengklik kembali atau ke hadapan, halaman akan menatal ke halaman? kedudukan sebelumnya, (WeChat Beginilah cara artikel di Moments dibaca. Kembali separuh jalan, kemudian masuk dan teruskan membaca dari kedudukan sebelumnya)

Jika ia baru

dan dimasukkan oleh page, ia akan ditetapkan semula kepada 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教程

Atas ialah kandungan terperinci Analisis mendalam tentang masalah skrin putih penukaran penghalaan dalam Vue (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!