摘要:近期在做一個微信公眾號的項目,在頁面跳轉時發現頁面會閃一下,用戶體驗很不好,而且如果網慢時頁面是沒有數據的樣式會亂很丑。唯一的缺點就是在運行沒問題,但是會有時關不上效果一直處于狀態而且很頻繁,剛開始我以為是網絡的問題,后臺切換到還是不行。
</>復制代碼
近期在做一個微信公眾號的項目,在頁面跳轉時發現頁面會閃一下,用戶體驗很不好,而且如果網慢時頁面是沒有數據的樣式會亂很丑。于是乎,就百度看了前人的各種解決方案,個人覺得以下鏈接中的方案還是很好的,代碼簡潔,效果也很滿意,不需要每個頁面做相對應的操作只需要在router.js文件中添加幾行代碼即可。
https://www.jb51.net/article/...
</>復制代碼
唯一的缺點就是在Android運行沒問題,但是ios會有時關不上loading效果一直處于loading狀態(而且很頻繁),剛開始我以為是網絡的問題,后臺切換到4G還是不行。我就各種調試,后來發現加上一個setTimeout便完美的解決了問題,代碼如下:
</>復制代碼
import Vue from "vue"
import Router from "vue-router"
//loading組件
import {Indicator} from "mint-ui";
Vue.use(Router)
let spinRoute = {
show() {//加載中顯示loading組件
Indicator.open({spinnerType: "fading-circle"});//開啟loading組件,這里我用的mint-ui
},
resolve(resolve) {//加載完成隱藏loading組件
return component=>{
setTimeout(()=>{
Indicator.close()//關閉loading組件
resolve(component);
}, 10)
}
}
}
export default new Router({
mode: "hash",
base: process.env.BASE_URL,
routes: [
{
path: "/home",
name: "home",
component: resolve => {
spinRoute.show();//加載時開啟loading
require(["./views/Home.vue"], spinRoute.resolve(resolve))//路由懶加載
},
meta: {
title: "首頁"
},
},
{
path: "/QRcode",
name: "QRcode",
component: resolve => {
spinRoute.show();
require(["./views/QRcode.vue"], spinRoute.resolve(resolve))
},
meta: {
title: "游戲推廣"
}
},
{
path: "/NotAgent",
name: "NotAgent",
component: resolve => {
spinRoute.show();
require(["./views/NotAgent.vue"], spinRoute.resolve(resolve))
},
meta: {
title: "友情提示"
}
},
{path:"*",redirect:"/home"}
]
})
最后,感謝以上鏈接中的大牛給到大家的解決方案.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/99297.html
摘要:但是同時,抽離到父模塊,也意味著如果有一個懶加載的路由沒有用到模塊,但是實際上引入了父模塊,也為這也引入了的代碼。 前言 我們清楚,在 webpack 中通過CommonsChunkPlugin 可以將 entry 的入口文件中引用多次的文件抽離打包成一個公用文件,從而減少代碼重復冗余 entry: { main: ./src/main.js, ...
摘要:凡是做的項目,特別是移動端的項目,首屏加載速度必定是一個繞不過去的話題。大家知道這些依賴庫的文件都會被一起打包到那個文件里面,如果這些你的第三方依賴庫很多,很大的話,那就會導致這個文件很大,那首屏加載的速度肯定會被拖慢。 凡是做SPA的項目,特別是移動端的SAP項目,首屏加載速度必定是一個繞不過去的話題。接下來我就我們項目里的一些實踐來做一下總結。希望拋磚引玉,如果各位有更好的方案,不...
摘要:現在,我們將更深入地研究,并學習用于分割應用程序最實用的模式。本系列文章基于對性能優化過程的學習。路徑時才被下載。為了便于理解,文件名稱并不是由生成的真實名稱。接下來,我們將學習其他部分和單獨的組件也能夠從主文件分割出來并延遲加載。 在前一篇文章中,我們學習了什么是代碼分割,它是如何與 Webpack 一起工作的,以及如何在Vue應用程序中使用延遲加載?,F在,我們將更深入地研究,并學習...
閱讀 1369·2019-08-30 15:44
閱讀 2114·2019-08-30 11:04
閱讀 530·2019-08-29 15:17
閱讀 2552·2019-08-26 12:12
閱讀 3140·2019-08-23 18:09
閱讀 931·2019-08-23 15:37
閱讀 1530·2019-08-23 14:43
閱讀 2935·2019-08-23 13:13