国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue-router懶加載時添加loading效果

mingde / 2934人閱讀

摘要:近期在做一個微信公眾號的項目,在頁面跳轉時發現頁面會閃一下,用戶體驗很不好,而且如果網慢時頁面是沒有數據的樣式會亂很丑。唯一的缺點就是在運行沒問題,但是會有時關不上效果一直處于狀態而且很頻繁,剛開始我以為是網絡的問題,后臺切換到還是不行。

</>復制代碼

  1. 近期在做一個微信公眾號的項目,在頁面跳轉時發現頁面會閃一下,用戶體驗很不好,而且如果網慢時頁面是沒有數據的樣式會亂很丑。于是乎,就百度看了前人的各種解決方案,個人覺得以下鏈接中的方案還是很好的,代碼簡潔,效果也很滿意,不需要每個頁面做相對應的操作只需要在router.js文件中添加幾行代碼即可。

https://www.jb51.net/article/...

</>復制代碼

  1. 唯一的缺點就是在Android運行沒問題,但是ios會有時關不上loading效果一直處于loading狀態(而且很頻繁),剛開始我以為是網絡的問題,后臺切換到4G還是不行。我就各種調試,后來發現加上一個setTimeout便完美的解決了問題,代碼如下:

</>復制代碼

  1. import Vue from "vue"
  2. import Router from "vue-router"
  3. //loading組件
  4. import {Indicator} from "mint-ui";
  5. Vue.use(Router)
  6. let spinRoute = {
  7. show() {//加載中顯示loading組件
  8. Indicator.open({spinnerType: "fading-circle"});//開啟loading組件,這里我用的mint-ui
  9. },
  10. resolve(resolve) {//加載完成隱藏loading組件
  11. return component=>{
  12. setTimeout(()=>{
  13. Indicator.close()//關閉loading組件
  14. resolve(component);
  15. }, 10)
  16. }
  17. }
  18. }
  19. export default new Router({
  20. mode: "hash",
  21. base: process.env.BASE_URL,
  22. routes: [
  23. {
  24. path: "/home",
  25. name: "home",
  26. component: resolve => {
  27. spinRoute.show();//加載時開啟loading
  28. require(["./views/Home.vue"], spinRoute.resolve(resolve))//路由懶加載
  29. },
  30. meta: {
  31. title: "首頁"
  32. },
  33. },
  34. {
  35. path: "/QRcode",
  36. name: "QRcode",
  37. component: resolve => {
  38. spinRoute.show();
  39. require(["./views/QRcode.vue"], spinRoute.resolve(resolve))
  40. },
  41. meta: {
  42. title: "游戲推廣"
  43. }
  44. },
  45. {
  46. path: "/NotAgent",
  47. name: "NotAgent",
  48. component: resolve => {
  49. spinRoute.show();
  50. require(["./views/NotAgent.vue"], spinRoute.resolve(resolve))
  51. },
  52. meta: {
  53. title: "友情提示"
  54. }
  55. },
  56. {path:"*",redirect:"/home"}
  57. ]
  58. })

最后,感謝以上鏈接中的大牛給到大家的解決方案.

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/99297.html

相關文章

  • 代碼分割與加載情況下(code-splitting+lazyload)抽離加載模塊的公用模塊代碼

    摘要:但是同時,抽離到父模塊,也意味著如果有一個懶加載的路由沒有用到模塊,但是實際上引入了父模塊,也為這也引入了的代碼。 前言 我們清楚,在 webpack 中通過CommonsChunkPlugin 可以將 entry 的入口文件中引用多次的文件抽離打包成一個公用文件,從而減少代碼重復冗余 entry: { main: ./src/main.js, ...

    zebrayoung 評論0 收藏0
  • vue項目首頁加載速度優化

    摘要:凡是做的項目,特別是移動端的項目,首屏加載速度必定是一個繞不過去的話題。大家知道這些依賴庫的文件都會被一起打包到那個文件里面,如果這些你的第三方依賴庫很多,很大的話,那就會導致這個文件很大,那首屏加載的速度肯定會被拖慢。 凡是做SPA的項目,特別是移動端的SAP項目,首屏加載速度必定是一個繞不過去的話題。接下來我就我們項目里的一些實踐來做一下總結。希望拋磚引玉,如果各位有更好的方案,不...

    rickchen 評論0 收藏0
  • VUE知識點集錦

    摘要:載入前后在階段,實例的和都初始化了,但還是掛載之前為虛擬的節點,還未替換。類似于,不同在于提交的是,而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別:https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理: 答:VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

    Tecode 評論0 收藏0
  • VUE知識點集錦

    摘要:載入前后在階段,實例的和都初始化了,但還是掛載之前為虛擬的節點,還未替換。類似于,不同在于提交的是,而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別:https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理: 答:VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

    APICloud 評論0 收藏0
  • Vue.js應用性能優化:第二部分---路由加載和 Vendor bundle 反模式

    摘要:現在,我們將更深入地研究,并學習用于分割應用程序最實用的模式。本系列文章基于對性能優化過程的學習。路徑時才被下載。為了便于理解,文件名稱并不是由生成的真實名稱。接下來,我們將學習其他部分和單獨的組件也能夠從主文件分割出來并延遲加載。 在前一篇文章中,我們學習了什么是代碼分割,它是如何與 Webpack 一起工作的,以及如何在Vue應用程序中使用延遲加載?,F在,我們將更深入地研究,并學習...

    0x584a 評論0 收藏0

發表評論

0條評論

mingde

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<