❤ vue-插件篇NProgress的用法

❤ vue-插件篇NProgress的用法

1、安装nprogress

npm install --save nprogress

2、引入

源使用其实是在项目的src下面的main.js里面

一般正常写在你的路由拦截器里面

我的在 permission.js

import NProgress from "nprogress"; // 导入 nprogress模块

import "nprogress/nprogress.css"; // 导入样式，否则看不到效果

NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示
————————————————

使用前

使用后

3、使用

router.beforeEach((to, from, next) => {
    console.log(to, from, next,'路由加载中！')
    NProgress.start(); //开启进度条
	//满足要求后就可以next()
    next();
});

router.afterEach(() => {
    console.log('路由加载完成！');
    NProgress.done(); //完成进度条
});