vue 路由进度条 nprogress

ゝ一纸荒年。 2023-10-07 20:54 20阅读 0赞

#### 阅读目录 ####

*  阐述
 *   *  1 vue 安装 nprogress
     *  2 路由文件中引入依赖
     *  源码 router\\index.js

## 阐述 ##

下面看下 Vue 使用 NProgress 的方法

NProgress 是页面跳转是出现在浏览器顶部的进度条  
官网：http://ricostacruz.com/nprogress/  
github：https://github.com/rstacruz/nprogress  
官网文档：https://madewith.cn/vuejs

效果图

![在这里插入图片描述][aeaea3fc15c44d0bb95ccdf681c179ea.png]  
这是一个轻量级的优化用户体验工具，我们先引入他的第三方依赖工具。

### 1 vue 安装 nprogress ###

`npm install --save nprogress`

PS E:\pdf1\vue-aadmin> npm install --save nprogress
    npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
    npm WARN css-loader@2.0.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN less-loader@5.0.0 requires a peer of less@^2.3.1 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN update-browserslist-db@1.0.10 requires a peer of browserslist@>= 4.21.0 but none is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    
    + nprogress@0.2.0
    added 1 package from 1 contributor in 12.036s
    PS E:\pdf1\vue-aadmin>

![在这里插入图片描述][9832cc733e1a46b790eb06629538aac7.png]

### 2 路由文件中引入依赖 ###

import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    NProgress.configure({
        
      easing: 'ease', // 动画方式
      speed: 500, // 递增进度条的速度
      showSpinner: false, // 是否显示加载ico
      trickleSpeed: 200, // 自动递增间隔
      minimum: 0.3 // 初始化时的最小百分比
    })
    // 当路由进入前
    router.beforeEach((to, from, next) => {
        
      // 每次切换页面时，调用进度条
      NProgress.start()
      // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
      next()
    })
    // 当路由进入后：关闭进度条
    router.afterEach(() => {
        
      // 在即将进入新的页面组件前，关闭掉进度条
      NProgress.done()
    })
    
    export default router;

### 源码 router\\index.js ###

E:\\pdf1\\vue-aadmin\\src\\router\\index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import NavMenu from '@/components/NavMenu'
    import Welcome from '@/components/Welcome.vue'
    import Systems from '@/components/system/system.vue'
    import Login from '@/components/Login.vue'
    
    Vue.use(Router)
    
    //获取原型对象上的push函数,多次点击路由地址不对报错问题，相当于重置路由。
    const originalPush = Router.prototype.push
    //修改原型对象中的push方法
    Router.prototype.push = function push(location) {
        
       return originalPush.call(this, location).catch(err => err)
    }
    
    const router = new Router({
        
      routes: [
        {
        
          path: '/',
          name: 'NavMenu',
          component: NavMenu,
          redirect:"/Welcome",
          children:[
            {
        path:"/welcome",component:Welcome},
            {
        path:"/system",component:Systems},
            {
        path: '/HelloWorld',component: HelloWorld}
          ]
        },
        {
        
          path: '/Login',
          name: 'Login',
          component: Login
        }
      ]
    })
    
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    NProgress.configure({
        
      easing: 'ease', // 动画方式
      speed: 500, // 递增进度条的速度
      showSpinner: false, // 是否显示加载ico
      trickleSpeed: 200, // 自动递增间隔
      minimum: 0.3 // 初始化时的最小百分比
    })
    // 当路由进入前
    router.beforeEach((to, from, next) => {
        
      // 每次切换页面时，调用进度条
      NProgress.start()
      // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
      next()
    })
    // 当路由进入后：关闭进度条
    router.afterEach(() => {
        
      // 在即将进入新的页面组件前，关闭掉进度条
      NProgress.done()
    })
    
    export default router;

[aeaea3fc15c44d0bb95ccdf681c179ea.png]: https://img-blog.csdnimg.cn/aeaea3fc15c44d0bb95ccdf681c179ea.png
[9832cc733e1a46b790eb06629538aac7.png]: https://img-blog.csdnimg.cn/9832cc733e1a46b790eb06629538aac7.png