vue移动端使用nprogress进度条详细操作

1前期准备2指令：3在项目中引入4用法5续-查找nprogress.css文件6续-打开文件修改文件

1前期准备

准备一个新配置好的vue脚手架

2指令：

npm install --save nprogress

3在项目中引入

在路由的index.js中引入要使用的nprogress,也可以在main.js中引用 我的在index.js中

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

4用法

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

在index.js中写法

let isLogin = false; router.beforeEach((to, from, next) => { NProgress.start() if (to.meta.requiresAuth && !isLogin) { alert('未登录'); next({ name: 'User' }) isLogin = true; } else { console.log('已登录'); next() } }) router.afterEach(transition => { NProgress.done(); })

5续-查找nprogress.css文件

6续-打开文件修改文件

可以通过修改线条粗细来明显的观察进度条的变化