Comment utiliser la barre de progression Nprogress.js dans vue

NProgress.js est un composant de barre de progression léger, facile à utiliser et qui peut être facilement intégré dans des applications d'une seule page. Cet article présente principalement la méthode d'utilisation de la barre de progression Nprogress.js dans le projet vue. Les amis qui en ont besoin peuvent se référer à

NProgress.js fournit un effet de barre de progression de chargement de page lorsque la page est ouverte et chargée. haut de la page Une animation de chargement de la barre de progression apparaîtra. NProgress.js est un composant de barre de progression léger, facile à utiliser et qui peut être facilement intégré dans des applications d'une seule page.

Barre de progression fine pour les applications Ajaxyy. Inspiré de Google, YouTube et Medium.

Utiliser nprogress.js dans vue

Installer

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

Introduire dans le projet

Introduire nprogress à utiliser dans main.js

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

Utilisation de base

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

Utiliser dans la page de routage pour sauter

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Cliquez sur le numéro de page pour modifier le contenu de la page dans la pagination dans vue.js

Dans le composant vue2.0 Comment implémenter la transmission de valeurs et la communication

Nouvelles fonctionnalités de la version webpack 4.0.0-beta.0 (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!