vue使用nprogress加載路由進度條的方法
1、效果圖

2、安裝
npm install --save nprogress
基本用法
NProgress.start();NProgress.done();
3、在路由中使用
import NProgress from ’nprogress’import ’nprogress/nprogress.css’router.beforeEach((to, from, next) => { NProgress.start(); next();});router.afterEach(() => { NProgress.done();});
PS:下面看下Vue使用NProgress的方法
NProgress是頁面跳轉是出現在瀏覽器頂部的進度條
官網:http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress
如下圖所示,綠色的進度條就是NProgress實現的效果

1、安裝
$ npm install --save nprogress 或者$ yarn add nprogress//用法NProgress.start();NProgress.done();
2、使用
//導入import NProgress from ’nprogress’import ’nprogress/nprogress.css’router.beforeEach((to, from, next) => { NProgress.start() next()})router.afterEach(() => { NProgress.done()})
總結
到此這篇關于vue使用nprogress加載路由進度條的文章就介紹到這了,更多相關vue nprogress路由進度條內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!
相關文章:
1. 編程語言PHP在Web開發領域的優勢在哪?2. 詳解Android studio 動態fragment的用法3. Android如何加載Base64編碼格式圖片4. Spring Boot和Thymeleaf整合結合JPA實現分頁效果(實例代碼)5. 解決Android studio xml界面無法預覽問題6. 什么是python的自省7. 基于android studio的layout的xml文件的創建方式8. .Net Core使用Coravel實現任務調度的完整步驟9. Springboot Druid 自定義加密數據庫密碼的幾種方案10. 圖文詳解vue中proto文件的函數調用

網公網安備