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是頁面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進度條

官網(wǎng)：http://ricostacruz.com/nprogress/

github：https://github.com/rstacruz/nprogress

如下圖所示，綠色的進度條就是NProgress實現(xiàn)的效果

1、安裝

$ npm install --save nprogress 或者$ yarn add nprogress//用法NProgress.start();NProgress.done();

2、使用

//導(dǎo)入import NProgress from ’nprogress’import ’nprogress/nprogress.css’router.beforeEach((to, from, next) => { NProgress.start() next()})router.afterEach(() => { NProgress.done()})

總結(jié)

到此這篇關(guān)于vue使用nprogress加載路由進度條的文章就介紹到這了,更多相關(guān)vue nprogress路由進度條內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！