Vue中nprogressページに進捗バーをロードする方法が実現されます。

nprogressページ読み込みプログレスバー
前言
多くの場合、ウェブページを訪問する時、私達はいつもページを見ていますが、どれぐらいの時間をロードしますか？この機能はnprogressによって実現できます。これはライト級のプログレスバーコンポーネントです。使いやすくて、応用に便利です。

nprogressをインストールする
プロジェクトに直接インストールコマンドを実行します。npm install --save nprogress
nprogressの方法

NProgress.start() //      
NProgress.set() //               ，     0 1.0
NProgress.inc() //         ，         100%
NProgress.done() //        
NProgress.configure() //        

グローバル導入
main.jsにnprogressプラグインと様式を導入し、

import NProgress from ‘nprogress' // nprogress  
import ‘nprogress/nprogress.css' // nprogress  

プログレスの設定
NProgress.co nfigure({}では、nprogressを適切に配置できます。showSpinnerはfalse、trickleはfalse、trickleはfalse、trickleRate、trickleSpeed、trickleSpeed(ステップ間隔、単位ミリ秒)、アニメーション方向、speedminimum（最小パーセンテージ）など。

NProgress.configure({ showSpinner: false }) //         

Vuerouterルートフックnprogressを追加する前に、私たちはVuerouterのbeforeEachとafterEachのフック関数を知っておく必要があります。これはルーティングがジャンプしているときに、何らかの権限判断や他の操作をするときに定義される処理関数で、Vue.beforeEachはジャンプの前に実行され、Vue.afterEachはジャンプの後に判断を実行するものです。Vue.beforeEach(function(to,form,next){})関数には3つのパラメータがあり、Vue.afterEach(function(to,form))関数には2つのパラメータがあります。to：まもなく入るルートオブジェクトfrom：現在のナビゲーションが離れるルートオブジェクトnext：この方法を呼び出して、次のフック関数に進み、next（false）：現在のナビゲーションを中断します。
ルートにnprogressを追加します。
main.jsでグローバルフック関数は、ルーティング・ジャンプ前にNProgress.start（）でプログレス・バーをマークしてスタートし、ルーティング・ジャンプ後にNProgress.done（）でマークして終了します。これにより、ルート・ジャンプ時にページ上部にプログレスバーのプログレス・バーが表示されます。

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/icons/index.js'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.use(Element)
Vue.config.productionTip = false
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})
router.afterEach(() => {
 NProgress.done()
})
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

リクエストにnprogressを追加します。
要求を送信するたびにプログレスバーが発生することを望むなら、axiosパッケージのルーティングブロックにnprogressを追加することができます。

//      (           )
axios.interceptors.request.use( 
 NProgress.start()
})
//      （      ）
axios.interceptors.response.use(
 NProgress.done()
)

構造をより滑らかにして簡潔にするために、コードを整理し直します。つまりnprogressは主にルートでジャンプします。ここではnprogressをrouterにまとめて入れます。実際のrouterを覚えてから、VuerouterのbeforeEachとafterEachフックの関数を呼んで発効します。

import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
Vue.use(Router)
const router = new Router({
 mode: 'history',
 routes: routers
})
export default router
 
router.beforeEach((to, from, next) => {
 NProgress.start()
 next()
})
router.afterEach(() => {
 NProgress.done()
})

nprogressスタイルを修正する
ap.vueに下記のスタイルを追加すればnprogressスタイルを修正できます。追加してください。impotantは元のスタイルをカバーします。

#nprogress .bar {
 background: #66B1FF !important; //      
 height: 20px !important; //      
 }

https://www.toutiao.com/i6718992880599302659/?group_id=671899288059302659を参照してください
ここで、Vueのnprogressページについて、プログレスバーをロードする方法で実現した文章を紹介します。Vue nprogressに関するロードプログレスの内容は以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。