vue路由切换loading_Vue中级指南-05 Vue中路由跳的转进度条和数据加载Loading显示

我们在Vue项目中路由跳转时希望出现一个进度条来显示当前跳转状态,或者在数据发起请求时有个loading提示框来提示当前正在加载数据,本篇文章简单介绍一下我在项目中的使用方法。

路由跳转进度条

NProgress是页面跳转时出现在浏览器顶部的进度条

npm install --save nprogress

复制代码NProgress 使用

// 如果在main.js引入并挂载在Vue实例上,请最在顶部引入,否则会出现问题。

// NProgress最重要两个API就是start()和done()，基本一般用这两个就足够了。

// router.js页面

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {

NProgress.start() // 显示进度条

next()

})

router.afterEach(() => {

NProgress.done() // 完成进度条

})

复制代码NProgress 高级用法

// (1)百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

NProgress.set(0.0)

NProgress.set(0.4)

NProgress.set(1.0)

// (2)递增：要让进度条增加，只要调用.inc()。这会产生一个随机增量，但不会让进度条达到100%。

// 此函数适用于图片加载或其他类似的文件加载。

NProgress.inc()

// (3)强制完成：通过传递 true 参数给done()，使进度条满格，即使它没有被显示

NProgress.done(true)

复制代码NProgress 其他配置<