vue使用nprogress加载路由进度条的方法

1、效果图

2、安装

npm install --save nprogress

基本用法

NProgress.start();
NProgress.done();

3、在路由中使用

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
 NProgress.start();
 next();
});

router.afterEach(() => {
 NProgress.done();
});

PS：下面看下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、使用

//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

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

router.afterEach(() => {
 NProgress.done()
})

总结

到此这篇关于vue使用nprogress加载路由进度条的文章就介绍到这了,更多相关vue nprogress路由进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 在vue项目中使用Nprogress.js进度条的方法

    NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro

  • vue使用nprogress实现进度条

    本文实例为大家分享了vue使用nprogress进度条展示的具体代码,供大家参考,具体内容如下 安装 npm i nprogress -S 使用 在main.js中 import NProgress from 'nprogress' import 'nprogress/nprogress.css' //使用钩子函数对路由进行权限跳转 router.beforeEach((to, from, next) => { const role = localStorage.getItem('ms_user

  • Vue使用NProgress进度条的方法

    本文实例为大家分享了Vue使用NProgress进度条的具体代码,供大家参考,具体内容如下 1.安装 npm i -S nprogress 2.在router.js中使用 import Vue from 'vue' import Router from 'vue-router' import NProgress from 'nprogress' import 'nprogress/nprogress.css' Vue.use(Router) const router = new Router({

  • vue配置nprogress实现页面顶部进度条

    vue配置nprogress实现页面顶部进度条

    本文实例为大家分享了vue配置nprogress实现页面顶部进度条的具体代码,供大家参考,具体内容如下 1. 安装 npm install nprogress --save 2. 在main.js中导入 源码~~~~~~方便你复制 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an a

  • vue使用nprogress加载路由进度条的方法

    1.效果图 2.安装 npm install --save nprogress 基本用法 NProgress.start(); NProgress.done(); 3.在路由中使用 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.beforeEach((to, from, next) => { NProgress.start(); next(); }); router.afterEach(() =

  • 使用Timer实现网页匀速加载的进度条样式

    使用Timer实现网页匀速加载的进度条样式

    在使用WebView加载网页时有时候网速等原因加载比较慢时,为了避免在加载网页的时候出现一片空白的区域,给用户很不好的体验感,我们往往在加载的时候添加一个进度条,使用户直观的感受到网页加载的进度,通常我们可以通过WebChromeClient里面的onProgressChanged()方法获取到当前的网页加载进度,但是当我们使用时会发现他的网页加载进度不是一点一点加载的,也许一下就加载到50%下一秒直接加载到80%,如果我们将其设置给progressBar看起来就很快而且很不顺畅,体验感较差,如

  • swift版webview加载网页进度条效果

    本文实例为大家分享了swift版webview加载网页展示的具体代码,供大家参考,具体内容如下 比较简单,直接上代码 import UIKit import WebKit import SnapKit class CMWebVC: UIViewController , WKNavigationDelegate { var webUrl: String? var webView: WKWebView =WKWebView() var progressView:UIProgressView = UI

  • vue src动态加载请求获取图片的方法

    vue src动态加载请求获取图片的方法

    一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, routers: this.$router.options.routes } } 3. 在需要的地方引入图片 <div class="avatar"><img :src="formData

  • Vue中nprogress页面加载进度条的方法实现

    nprogress页面加载进度条 前言 很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我们可以依靠nprogress来实现,它是轻量级的进度条组件,使用简便,可以很方便集成到应用中来. 安装nprogress 直接在项目中执行安装命令:npm install --save nprogress nprogress方法 NProgress.start()

  • vue后台管理之动态加载路由的方法

    vue后台管理之动态加载路由的方法

    在这里我们将会实现一个vue动态路由的案列,当用户登陆成功后,根据用户的角色,拿到他对应的菜单信息,并将它动态的载入到我们的路由中. 我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制.同样的我们也需要实现一个这样的功能. 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现. 一.思路 在vue-router对象中首先初始化公共路由,比如(404,login)等,然后在用户登陆成功,根据用户

  • vue+element使用动态加载路由方式实现三级菜单页面显示的操作

    需要用到中间件的方式,这样就可以实现了我们想要的方式 publish-center.vue <template> <router-view></router-view> </template> <script> export default { } </script> <el-menu :default-active="$route.path" class="el-menu-vertical-dem

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

随机推荐