【NProgress】浏览器进度条的使用

目录

1.【安装】

2.【引入】

3.【使用】

4.【举例】

---

1.【安装】

cnpm install --save nprogress

此处有坑：使用npm引入时，会显示引入的css文件不存在。

2.【引入】

在main.js或router.js中分别引入这两行代码 

上面一句为 格式化代码

下面一句为进度条的样式

import Nprogress from 'nprogress'

import 'nprogress/nprogress.css'

// 显示右上角螺旋加载提示

NProgress.configure({ showSpinner: false })

3.【使用】

// 直接调用 start()或者done()来控制进度条。
   NProgress.start();
   NProgress.done();

// 可以通过调用 .set(n)来设置进度，n是0-1的数字。
    NProgress.set(0.0);    
    NProgress.set(0.4);
    NProgress.set(1.0);   

4.【举例】

router.beforeEach((to, from, next) => {
  NProgress.start()
  // 1. 判断是不是登录页面
  // 是登录页面
  if (to.path == '/') {
    next()
    NProgress.done()
  } else {
    // 不是登录页面
    // 2. 判断 是否登录过
    let id = localStorage.getItem('id')
    id ? next() : next('/')
    NProgress.done() 
  }
})
// vue全局的导航钩子函数：进入某个路由之后触发的钩子函数
// 用法1.修改每个页面的title 2.每次切换页面的时候，让页面滚动到最顶部
router.afterEach((to,from,nex)=>{
  NProgress.done()
//  修改每个页面的title
//  document.title=to.meta.title
//  每次切换页面的时候，让页面滚动到最顶部
//  document.title = to.title
//  window.scrollTo(0,0)
})

扩展下，通常router.afterEach使用较少，但是有些功能还是要用到的用法1.修改每个页面的title 2.每次切换页面的时候，让页面滚动到最顶部