Vue.js中使用nprogress进度条

安装

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>

Vue.js中使用nprogress进度条相关推荐

vue——Nprogress进度条功能实现
下图中的这种顶部进度条是非常常见的,在vue项目中有对应的插件.Nprogress Nprogress进度条的使用方法如下: 1.安装nprogress插件 npm install --save np ...
VUE项目--nprogress进度条
安装 npm install --save nprogress 引入在src/api/requests.js文件中引入 // 引入进度条 import nprogress from 'nprogre ...
NProgress 进度条
NProgress 实现进度条 NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 参考文章@小丶侯参考文章@CEZLZ 一.安装 npm install --save nprogres ...
JS video 禁止拖动进度条
需要实现一个效果,视频加载的过程中禁止拖动进度条快进. 开始呢我想着把控件禁掉,自动播放解决. <video id="video" src="http://kuan ...
vue.js中DES、RSA、SHA1、MD5这四种加密算法的使用
vue.js中DES.RSA.SHA1.MD5这四种加密算法的使用 DES RSA SHA1 MD5 DES 美国数据加密标准(DES)是对称密码算法,就是加密密钥能够从解密密钥中推算出来,反过来也 ...
echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了在 webpack 中使用 EChar ...
Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
vue.js中mock本地json数据
vue.js中mock本地json数据新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
VUE.js 中取得后台原生HTML字符串原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...

Vue.js中使用nprogress进度条

安装

简单使用

引入

配置

路由守卫

修改进度条样式

Vue.js中使用nprogress进度条相关推荐

最新文章

热门文章