Use the Nprogress. js progress bar method in the vue project, vuenprogress. js

Use the Nprogress. js progress bar method in the vue project, vuenprogress. js

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

The long progress bar of the Ajaxyy application. Inspired by Google, YouTube, and Medium.

Use nprogress. js in vue

Install

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

Introduce

Introduce the nprogress to be used in main. js

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

Basic usage

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

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

Summary

The above section describes how to use Nprogress In the vue project. js progress bar method, hope to help you, if you have any questions, please leave a message, xiaobian will reply to you in a timely manner. Thank you very much for your support for the help House website!