Vue進度條使用方法詳解

Vue進度條是一種很強大的展示網頁加載進度的方式，可以使用戶更直觀地感受到頁面加載狀態。Vue進度條可以在瀏覽器請求網絡資源時自動增長，也可以通過手動控制進度條的值來實現一些自定義需求。

一、Vue進度條的基本使用方法

Vue進度條有很多不同的實現方法，以下是使用 `nprogress` 庫實現進度條的基本方法：

首先安裝 `nprogress` 庫：

npm install --save nprogress

然後在 main.js 中引入該庫，並設置全局樣式：

// main.js
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

接下來，在需要展示進度條的組件中，使用以下代碼控制進度條的顯示和隱藏：

export default {
  name: 'MyComponent',
  mounted() {
    // 顯示進度條
    NProgress.start()

    // hide the progress bar
    NProgress.done()
  }
}

以上代碼中， `NProgress.start()` 顯示進度條， `NProgress.done()` 隱藏進度條。

二、通過路由來控制進度條

一般情況下，我們的頁面路由會較多，每個路由跳轉的過程中都要控制進度條的顯示和隱藏，這樣代碼會變得非常冗長。為了避免這種情況，我們可以通過 Vue-router 機制來自動控制進度條的顯示和隱藏。

在 main.js 中配置 Vue-router：

// main.js
import Vue from 'vue'
import router from './router'
import App from './App.vue'

Vue.config.productionTip = false

// 引入進度條
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })

// 配置Vue Router
router.beforeEach((to, from, next) => {
  NProgress.start() // 開始進度條
  next()
})
router.afterEach(() => {
  NProgress.done() // 結束進度條
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

通過這個方法，可以大大簡化路由控制進度條的代碼量。

三、在App.vue中使用進度條

如果我們想在整個應用程序中使用進度條，可以將其放在App.vue中。在App.vue中，我們可以使用 `$route.path` 監聽頁面路由變化，然後自動控制進度條。

以下是在App.vue中控制進度條的代碼：

<template>
  <div>
    <!-- 通過 CSS 實現進度條 -->
    <div class="my-progress-bar" :style="{ width: progressBarWidth }"></div>
    <router-view />
  </div>
</template>

<script>
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export default {
  name: 'App',
  data() {
    return {
      progressBarWidth: '0%'
    };
  },
  watch: {
    '$route' (to, from) {
      NProgress.start()
      this.progressBarWidth = '20%'
      setTimeout(() => {
        this.progressBarWidth = '100%'
        NProgress.done()
      }, 1000)
    }
  }
}
</script>

<style>
  .my-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background-color: blue;
    z-index: 9999999;
    transition: 0.3s;
  }
</style>

以上代碼實現了在應用程序中控制進度條的方法：頁面路由發生變化時，自動控制進度條的顯示和隱藏。

四、使用進度條實現App端的加載動畫

我們可以使用 `nprogress` 庫提供的 `inc(time)` 方法，來實現一個自定義的進度條加載動畫。下面的代碼展示了如何使用 `nprogress` 庫來實現App端啟動頁的加載動畫：

在啟動頁的組件中引入 `nprogress` 庫：

// src/views/Startup.vue
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })

export default {
  name: 'Startup',
  beforeMount() {
    this.updateProgress()
  },
  methods: {
    updateProgress() {
      NProgress.inc(0.1)
      if (NProgress.status === 1) {
        NProgress.done()
        this.$router.push('/home')
      } else {
        setTimeout(() => {
          this.updateProgress()
        }, 400)
      }
    }
  }
}

這個代碼塊中，原本打算直接重定向到 `home` 頁面，然而通過 `updateProgress` 方法更新右上角的進度條的時候，等到進度條增加到 `1` 時再進行重定向。

好了，到這裡我們已經講了四個實例，基本上涵蓋了Vue進度條的使用方法。手寫進度條不是很複雜，但使用 `nprogress` 庫能極大地方便我們的開發，提高代碼的簡潔性和可讀性。希望同學們在實際項目中，結合自己的情況來使用Vue進度條，提高用戶體驗，美化你的應用程序。