在vue項目中使用Nprogress.js進度條的方法
更新時間：2018年01月31日 09:30:07 作者：小小令
NProgress.js是輕量級的進度條組件，使用簡便，可以很方便集成到單頁面應用中。這篇文章主要介紹了在vue項目中使用Nprogress.js進度條的方法,需要的朋友可以參考下
NProgress.js提供頁面加載進度條效果，當頁面打開加載時，在頁面頂部會出現(xiàn)進度條加載動畫。NProgress.js是輕量級的進度條組件，使用簡便，可以很方便集成到單頁面應用中。
Ajaxyy應用程序的細長進度條。靈感來自Google，YouTube和Medium。
在vue中使用nprogress.js
安裝
$ bower install --save nprogress $ npm install --save nprogress
在項目中引入
在main.js中引入要使用的nprogress
import NProgress from 'nprogress' import 'nprogress/nprogress.css'
基本用法
NProgress.start(); NProgress.done();
在路由頁面跳轉(zhuǎn)使用
同樣在main.js中
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
sessionStorage.removeItem('username');
}
let user = sessionStorage.getItem('username');
if (!user && to.path != '/login') {
next({path: '/login'})
} else {
NProgress.start();
next()
}
});
router.afterEach(transition => {
NProgress.done();
});
總結(jié)
以上所述是小編給大家介紹的在vue項目中使用Nprogress.js進度條的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue手寫實現(xiàn)組件初渲染，在Vue進行文本編譯之后，會得到代碼字符串生成的render函數(shù)，本文會基于render函數(shù)展開主題相關(guān)內(nèi)容，感興趣的朋友可以參考一下2022-08-08
這篇文章主要介紹了Vue3中實現(xiàn)div拖拽功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要為大家介紹了分析總結(jié)20道Vue高頻面試題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細介紹了vue中element-ui使用axios上傳文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
在開發(fā)前端應用時,地圖選擇器是一個非常常見的需求,本文將一步步展示如何使用?Vue?3?和?Element?Plus?來實現(xiàn)一個百度地圖位置選擇器組件,有需要的可以參考一下2025-04-04
解決vue-router進行build無法正常顯示路由頁面的問題
下面小編就為大家分享一篇解決vue-router進行build無法正常顯示路由頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了在antd Table中插入可編輯的單元格實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue-quill-editor富文本編輯器上傳視頻功能詳解
需求需要實現(xiàn)富文本的功能,同時富文本中還可以上傳視頻和圖片,選來選去最后決定了用這個富文本編輯器,下面這篇文章主要給大家介紹了關(guān)于vue-quill-editor富文本編輯器上傳視頻功能的相關(guān)資料,需要的朋友可以參考下2023-05-05
如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題
這篇文章主要介紹了如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
集成vue-cli腳手架里面的二維碼插件貌似很多，一般都會滿足大部分需求，這次就講一下插件vue-qriously生成二維碼效果，感興趣的朋友一起看看吧2022-04-04