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路由進度條內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！