How to use Nprogress.js progress bar in vue

NProgress.js is a lightweight progress bar component that is easy to use and can be easily integrated into a single-page application. This article mainly introduces the method of using Nprogress.js progress bar in vue project. Friends who need it can refer to

NProgress.js provides page loading progress bar effect. When the page is opened and loaded, at the top of the page A progress bar loading animation will appear. NProgress.js is a lightweight progress bar component that is easy to use and can be easily integrated into single-page applications.

Slim progress bar for Ajaxyy applications. Inspired by Google, YouTube and Medium.

Use nprogress.js in vue

Install

$ bower install --save nprogress
$ npm install --save nprogress

Introduce into the project

In Introduce the nprogress to be used in main.js

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

Basic usage

NProgress.start(); 
NProgress.done();

Use the same when jumping on the routing page

In 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();
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implementing paging in vue.js by clicking the page number to replace the page content

In the vue2.0 component How to implement value passing and communication

New features of webpack 4.0.0-beta.0 version (detailed tutorial)

The above is the detailed content of How to use Nprogress.js progress bar in vue. For more information, please follow other related articles on the PHP Chinese website!