Vue使用NProgress實(shí)現(xiàn)頁(yè)面頂部的進(jìn)度條顯示效果
一、安裝
npm i nprogress -S
二、常用配置項(xiàng)
1、遞增進(jìn)度條
以隨機(jī)量遞增，將其用于加載
NProgress.inc()
如果要增加特定值，可以將其作為參數(shù)傳遞
NProgress.inc(0.2)
2、動(dòng)畫(huà)設(shè)置
使用緩動(dòng)（CSS緩動(dòng)字符串）和速度（以毫秒為單位）調(diào)整動(dòng)畫(huà)設(shè)置。（默認(rèn)：ease和200）
NProgress.configure({ easing: ‘ease’, speed: 400 })
通過(guò)將加載微調(diào)器設(shè)置為false來(lái)關(guān)閉它。（默認(rèn)值：true）
NProgress.configure({ showSpinner: false })
三、使用
在main.js中引入樣式
import 'nprogress/nprogress.css'
它默認(rèn)顯示為藍(lán)色進(jìn)度條，如果想自定義進(jìn)度條顏色，可在全局css中或在app.vue下寫(xiě)入自己自定義的css樣式；
<style>
// 自定義進(jìn)度條顏色
#nprogress .bar {
background: #e2e2e2 !important;
}
</style>
在路由文件router文件夾的index.js文件中
//引入nprogress 進(jìn)度條插件
import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'
Vue.use(VueRouter)
// 配置進(jìn)度條
NProgress.inc()
NProgress.configure({ showSpinner: false })
const routes = [{...}]
const router = new VueRouter({
routes
})
// 頁(yè)面路由剛開(kāi)始切換的時(shí)候
router.beforeEach(async (to,from,next) => {
// 開(kāi)啟進(jìn)度條
NProgress.start();
})
// 頁(yè)面路由切換完畢的時(shí)候
router.afterEach(() => {
// 關(guān)閉進(jìn)度條
NProgress.done()
})
export default router
在項(xiàng)目中常見(jiàn)的會(huì)把路由守衛(wèi)（權(quán)限等控制）與頂部進(jìn)度條的使用抽取出來(lái)放到一個(gè)文件中
如： nprogress.js文件，放在src的根目錄下
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
NProgress.start()
if (to.path !== '/login') {
if (sessionStorage.getItem("token")) { // 判斷當(dāng)前的token是否存在 ； 登錄存入的token
next();
} else {
next({path: '/login'})
}
} else {
next();
}
});
router.afterEach(() => {
NProgress.done()
})
然后在main.js中引入
import '@/nprogress'
到此這篇關(guān)于Vue使用NProgress實(shí)現(xiàn)頁(yè)面頂部的進(jìn)度條顯示效果的文章就介紹到這了,更多相關(guān)Vue NProgress內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于vue-router路由的傳參方式params query
這篇文章主要介紹了關(guān)于vue-router路由的傳參方式params query,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue3中ref綁定dom或者組件失敗的原因及分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue使用formData格式類(lèi)型上傳文件的示例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09
vue中前端代理跨域問(wèn)題實(shí)例總結(jié)
前后端分離進(jìn)行項(xiàng)目開(kāi)發(fā),跨域問(wèn)題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
vue項(xiàng)目中導(dǎo)入swiper插件的方法
這篇文章主要介紹了vue項(xiàng)目中導(dǎo)入swiper插件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
本文詳細(xì)介紹了如何在Vue項(xiàng)目中集成和使用富文本編輯框,并分享了一些實(shí)踐經(jīng)驗(yàn),介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開(kāi)發(fā)者在實(shí)際項(xiàng)目中根據(jù)需求進(jìn)行更多探索和定制2024-10-10
每個(gè)Vue實(shí)例在創(chuàng)建時(shí)都要經(jīng)過(guò)一系列初始化,?例如設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模板、將實(shí)例掛載到DOM并在數(shù)據(jù)變化時(shí)更新DOM等，同時(shí),?也會(huì)運(yùn)行一些叫作生命周期鉤子的函數(shù)，接下來(lái)讓我們一起來(lái)探索Vue實(shí)例被創(chuàng)建時(shí)都經(jīng)歷了什么，感興趣的同學(xué)跟著小編一起來(lái)探討吧2023-05-05
vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例
本文主要介紹了element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要以 vue-cli3 搭建的項(xiàng)目為例，來(lái)聊一下如何在項(xiàng)目中更優(yōu)雅的使用 svg 。感興趣的朋友跟隨小編一起看看吧2018-10-10