vue 路由进度条 nprogress
阅读目录
- 阐述
- 1 vue 安装 nprogress
- 2 路由文件中引入依赖
- 源码 router\index.js
阐述
下面看下 Vue 使用 NProgress 的方法
NProgress 是页面跳转是出现在浏览器顶部的进度条
官网:http://ricostacruz.com/nprogress/
github:https://github.com/rstacruz/nprogress
官网文档:https://madewith.cn/vuejs
效果图
这是一个轻量级的优化用户体验工具,我们先引入他的第三方依赖工具。
1 vue 安装 nprogress
npm install --save nprogress
PS E:\pdf1\vue-aadmin> npm install --save nprogress
npm WARN ajv-keywords@3.5.2 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN css-loader@2.0.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN less-loader@5.0.0 requires a peer of less@^2.3.1 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN update-browserslist-db@1.0.10 requires a peer of browserslist@>= 4.21.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ nprogress@0.2.0
added 1 package from 1 contributor in 12.036s
PS E:\pdf1\vue-aadmin>
2 路由文件中引入依赖
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()// 这个一定要加,没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了next()
})
// 当路由进入后:关闭进度条
router.afterEach(() => {// 在即将进入新的页面组件前,关闭掉进度条NProgress.done()
})export default router;
源码 router\index.js
E:\pdf1\vue-aadmin\src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NavMenu from '@/components/NavMenu'
import Welcome from '@/components/Welcome.vue'
import Systems from '@/components/system/system.vue'
import Login from '@/components/Login.vue'Vue.use(Router)//获取原型对象上的push函数,多次点击路由地址不对报错问题,相当于重置路由。
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)
}const router = new Router({routes: [{path: '/',name: 'NavMenu',component: NavMenu,redirect:"/Welcome",children:[{path:"/welcome",component:Welcome},{path:"/system",component:Systems},{path: '/HelloWorld',component: HelloWorld}]},{path: '/Login',name: 'Login',component: Login}]
})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()// 这个一定要加,没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了next()
})
// 当路由进入后:关闭进度条
router.afterEach(() => {// 在即将进入新的页面组件前,关闭掉进度条NProgress.done()
})export default router;
vue 路由进度条 nprogress相关推荐
- vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装 二.NProgress 使用 三.NProgress 配置 四.Vue 中修改进度条颜色 ...
- vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...
- vue请求进度条效果
添加请求进度条效果 安装nprogress 进入项目目录:cd client 安装依赖包:cnpm i nprogress -S 在main.js中:导入Nprogress包对应的js和css imp ...
- vue 环形进度条 组件封装
子组件circle: <template><div :style="svgStyle"><svg :style="svgStyle" ...
- Vue顶部进度条工具nprogress使用
NProgress是页面跳转是出现在浏览器顶部的进度条 官网:NProgress: slim progress bars in JavaScript github:GitHub - rstacruz/ ...
- vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话 第412篇// 正文共:1800 字// 预计阅读时间:8 分钟 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
- vue实现进度条隐藏_实现带有进度条的Vue延迟加载
下面Vue.js栏目给大家介绍一下给Vue的惰性加载添加进度条的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 简介 通常用 Vue.js 编写单页应用(SPA)时,当加载页面 ...
- 页面载入进度条 nprogress的使用
介绍 页面路由切换时,附带一个加载进度条会显得非常友好,不至于白屏时间过长,让用户以为页面假死. 这时候我们可以用到 nprogress[108],在路由切换时开启和关闭: 安装 npm npm in ...
- vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用
***** git项目地址: https://github.com/surmon-china/vue-video-player ***** 参考文章: https://www.jianshu.com/ ...
最新文章
- 腾讯2009年笔试题
- OSMboxPost()
- docker 如何删除<none>镜像
- python自学行_怎么自学python?
- 清除重复记录只保留一条
- led灯条维修_led硅胶线条灯不亮的8大原因,怎样识别led灯带的质量
- proftpd的配置
- framework —— auth认证
- vue-amap - 基于Vue2.0和高德地图的地图组件
- 【自我】自我训练-改变焦虑和抑郁的习惯
- 据说教师资格证除了当老师还有这些用途
- cpu功耗排行_笔记本低功耗cpu有哪些 低功耗笔记本cpu排行介绍【图文】
- 没有学历没有工作经验的程序员怎么找工作
- python绘制引力波
- 开源中国.....挂掉了....有图有真相
- 微型计算机简单并行接口实验
- MySQL数据库密码配置
- 普乐蛙5d车载影院5d飞行影院5d轨道影院体验馆
- csv和excel php 解析_PHP 高效导入导出Excel(csv)方法之fgetcsv()和fputcsv()函数
- 毫秒服务引擎msec