Vue使用NProgress
NProgress是页面跳转是出现在浏览器顶部的进度条
官网:http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress
如下图所示,绿色的进度条就是NProgress
实现的效果
1、安装
$ npm install --save nprogress 或者
$ yarn add nprogress //用法
NProgress.start();
NProgress.done();
2、使用
router.js
//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' router.beforeEach((to, from, next) => {
NProgress.start()
next()
}) router.afterEach(() => {
NProgress.done()
})
颜色修改:https://blog.csdn.net/wn1245343496/article/details/82082152
Vue使用NProgress的更多相关文章
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- 在vue项目中使用Nprogress.js进度条
NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress ...
- import from 相对路径
项目目录 - server - static - src - - stroe - - router - - main.js - app.js src为前端文件,src目录下有main.js代码如下 i ...
- Vue项目开发,nprogress进度条加载之超详细讲解及实战案例
Nprogress的默认进度条很细,它的设计灵感主要来源于 谷歌,YouTube 他的安装方式也很简单,你可以有两种使用方式: 直接引入js和css文件 使用npm安装的的方式 直接引入: Npm安装 ...
- Vue中使用NProgress实现进度条
简介 NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条 GitHub地址:https://github.com/rstacruz/nprogress 在线演示地址:http://ric ...
- 在vue中使用nprogress
NProgress的官网:http://ricostacruz.com/nprogress/ 源码地址:https://github.com/rstacruz/nprogress 1.安 ...
- NProgress颜色的修改以及在Vue中的使用
一.NProgress的作用是在站内进行页面之间的跳转的时候,在浏览器的顶部显示一个进度,使用非常简单,可以在百度一下. 二.如何修改NProgress默认的进度条颜色?如下图,修改为自己想要的颜色即 ...
- React、Vue添加全局的请求进度条(nprogress)
全局的请求进度条,我们可以使用nprogress来实现,效果如下: 首先需要安装插件: npm i nprogress -S 然后使用的时候主要有两种方式,第一种是切换页面的时候,第二种则是请求接口的 ...
- vue系列之动态路由【原创】
开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了 ...
随机推荐
- mysql 查询当天数据
查询当天数据 select * from tab where FROM_UNIXTIME(fabutime, '%Y%m%d') = 20121217; mysql TO_DAYS(date) 函 ...
- linux-ifconfig 查看没有IP
ifconfig 查看没有IP,如图: 解决方法: 1.切换路径到 2.进入编辑ifcfg-ens33文件(文件名可能不同)模式 3.ONBOOT改为yes 4.点击ESC,输入:wq进行保存 5.输 ...
- redis-启用命令
一.redis后端启动: 1.将redis源码包中的redis.conf配置文件复制到redis/bin/下 # cd /root/redis-3.0.0 # cp redis.conf /usr/l ...
- window10体验terminal
体验window-terminal(preview),很不错可以直接登录服务器通过ssh 01.打开store 02.搜索terminal 03.体验ssh主机 04.很爽,可以ctrl + 鼠标滚轮 ...
- VUE 动态菜单管理
业务场景 不同的用户登录,看到的菜单会不一样,因此需要根据不同人登录的身份去后端获取菜单. 实现思路 1.构建路由 2.从后端构建菜单 3.前端获取菜单 4.前端渲染菜单 1.构建路由. export ...
- ValueError:GraphDef cannot be larger than 2GB.解决办法
在使用TensorFlow 1.X版本的estimator的时候经常会碰到类似于ValueError:GraphDef cannot be larger than 2GB的报错信息,可能的原因是数据太 ...
- WebLogic任意文件上传漏洞(CVE-2019-2618)
WebLogic任意文件上传漏洞(CVE-2019-2618) 0x01 漏洞描述 漏洞介绍 CVE-2019-2618漏洞主要是利用了WebLogic组件中的DeploymentService接口, ...
- Laravel5.4框架中视图共享数据的方法详解
本文实例讲述了Laravel5.4框架中视图共享数据的方法.分享给大家供大家参考,具体如下: 每个人都会遇到这种情况:某些数据还在每个页面进行使用,比如用户信息,或者菜单数据,最基本的做法是在每个视图 ...
- deque_queue_list
#include <iostream> #include <deque>//front push pop back push pop [] at() #include < ...
- 2019阿里JVM组实习面经
面试质量非常高....非常高...高... 一面 自我介绍 看过hotspot哪些模块,模板解释器工作说一下,生成的native code放在哪,怎么处理safepoint的 说项目,实现了哪些字节码 ...