Vue项目电商后台管理系统 nprogress--进度条

前期回顾     

结合 服务器+后端+前端，完成 vue项目 后台管理系统_活在风浪里的博客-CSDN博客亲测可用 gitee 网址 包括php包，后端node.js代码，前端源码 以及文档接口说明 + 结合 服务器+后端+前端，完成 vue项目 后台管理系统https://blog.csdn.net/m0_57904695/article/details/122648464?spm=1001.2014.3001.5501

前言：

• 结合到Vue项目上的进度条，完整版点击上面查看项目，定会收获颇多

简介： 

• 在你打开页面的时候，出现进度条，在最顶部！与加载中相辅相成

效果图例： 

目录

前言：

简介： 

效果图例： 

 1、安装

 2、使用

 3、修改进度条颜色：

结语： 

---

  

1、安装

 cnpm install --save nprogress 

 2、使用

// 第一步下载依赖cnpm install --save nprogress
// 第二步在router/index.js导入进度条和进度条样式
//第三部如果想要在所有进入页面都显示进度条，就使用全局路由钩子，
//如果是单个页面就使用， 路由独享守卫

位置：router/index.js

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

在进入页面之前开启进度条 、进入之后关闭

//路由守卫
// 进入之前路由元信息配置守卫 requiredPath为true, 适合守卫多个页面 vue3next() 变成return true
router.beforeEach((to, from, next) => {
        if (localStorage.getItem('token')) {
            NProgress.start() //开启进度条
            next()
        } else {
            if (to.meta.requiredPath) { //没有token requiredPath为true 守卫不让进,跳入login
                next('/Login')
            } else {
                next()
            }
        }

    })

    // 导航后置守卫(当你真正进入到某个页面之后才执行)
router.afterEach((to, from) => {
    // 设置路由的标题 (可自定义)
    document.title = to.meta.title || '常驻标题'
        // 将所有的页面切换之后滚动到最顶部
    window.scrollTo(0, 0);
    NProgress.done(); //进入之后关闭进度条
})

修改进度条颜色：

在App.vue中的style中增加：

 #nprogress .bar {
      background: red !important; //自定义颜色
    }

 

结语： 

本文完结！