How to use progress bars in vue project

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

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

Use in vue

Install

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

Introduced in the project

Introduce nprogress to use

import NProgress from 'nprogress'
import 'nprogress/'

Basic usage

(); 
();

Jump on the routing page

Also in

((to, from, next) => {
if ( == '/login') {
 ('username');
 }
let user = ('username');
if (!user &&  != '/login') {
 next({path: '/login'})
 } else {
 ();
 next()
 }
});
(transition => {
 ();
});

Summarize

The above is the method of using progress bars in vue projects introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!