安装
npm install --save nprogress
简单使用
router目录下，index.js
引入
import NProgress from 'nprogress'import 'nprogress/nprogress.css'
配置
NProgress.configure({easing: 'ease',speed: 500, // 递增进度条的速度showSpinner: false, // 是否显示加载icotrickleSpeed: 200, // 自动递增间隔minimum: 0.3 // 初始化时的最小百分比});
路由守卫
router.beforeEach((to, from, next) => {NProgress.start();if (to.path === '/login' || to.path === '/home') {next();} else {let token = localStorage.getItem('Authorization');if(to.matched.some(record => record.meta.requiresAuth)) {if(!token){next('/login');}else {next();}}// if ((!token || isAuth) && to.matched.some(record => record.meta.requiresAuth)) {// next('/login');// } else {// next();// }}if (to.matched.length === 0) {//如果未匹配到路由from.name ? next({name:from.name }) : next('/404'); //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由} else {next(); //如果匹配到正确跳转}});// 路由跳转后钩子函数中 - 执行进度条加载结束router.afterEach(() => {NProgress.done();});
修改进度条样式
项目App.vue
<style>#nprogress .bar {background: #222222 !important;}</style>
