前言

在PC端項(xiàng)目的開發(fā)過程中，有時(shí)我們需要給項(xiàng)目添加一個(gè)進(jìn)度條來展示界面是否已經(jīng)完成加載的情況。那么如何才能成功添加進(jìn)度條呢？

添加方式

用法1: 在攔截器中使用
1.引入插件Nprogress

npm install --save nprogress

2.在main.js中引入對(duì)應(yīng)的包文件

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

3.展示進(jìn)度條，我選擇的時(shí)間是發(fā)送request請(qǐng)求的時(shí)候展示（因?yàn)槲业慕缑媸褂昧薱reated鉤子函數(shù)去獲得后端的數(shù)據(jù)，也可以寫在路由跳轉(zhuǎn)之前展示）

axios.interceptors.request.use(config => {
NProgress.start()
return config
})

3.隱藏進(jìn)度條，在response攔截器中隱藏（證明已經(jīng)返回了數(shù)據(jù)，界面已經(jīng)加載）

axios.interceptors.response.use(config => {
NProgress.done()
return config
})

4.附上該插件的GitHub地址，里面有使用的詳細(xì)信息
https://github.com/rstacruz/nprogress

用法2: 在路由跳轉(zhuǎn)之前展示
1,安裝

npm install NProgress --save--dev

2,調(diào)用

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

3,配置

NProgress.configure({ showSpinner: false }); // 去掉右側(cè)加載圓圈//切換頁面的時(shí)候調(diào)用 router.beforeEach((to, from, next) => {NProgress.start(); // start progress barnext(); });router.afterEach(() => {NProgress.done(); }); 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Vue给项目添加进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。