Vue项目页面跳转时浏览器窗口上方显示进度条功能

在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。

然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间。如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应。所以,这个时候我们可以加一个进度条来告知用户。

具体实现,我们使用NProgress这个滚动条效果插件。

1.安装:

cnpm install --save nprogress

2.在main.js中引入:

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

3.在main.js中进行配置:

NProgress.configure({
 easing: 'ease', // 动画方式
 speed: 500, // 递增进度条的速度
 showSpinner: false, // 是否显示加载ico
 trickleSpeed: 200, // 自动递增间隔
 minimum: 0.3 // 初始化时的最小百分比
})

4.在main.js中对路由钩子进行设置:

 //当路由进入前
 router.beforeEach((to, from , next) => {
  // 每次切换页面时,调用进度条
 NProgress.start();
   // 若加载时间长且不定,担心进度条走完都没有加载完,可以调用
  NProgress.inc();//这会以随机数量递增,且永远达不到100%,也可以设指定增量
 next();
 });
//当路由进入后:关闭进度条
router.afterEach(() => {
 // 在即将进入新的页面组件前,关闭掉进度条
 NProgress.done()
})

补充:vue页面跳转方法

vue2.0在使用的过程中, .vue文件之间的跳转,需要在router里面配置path,通过路径跳转,html文件跳转如下:

<router-link to="/path"><button>跳转</button></router-link>

但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,方法如下:

this.$ router.push({path: ‘/…'}); path为跳转路径,此方法会产生历史记录
this.$ router.push({name:'…'}) name也可以作为路由跳转
this.$ router.push({path:‘home',query:{obj:'…'}}) query:参数,可通过this.$ route.query.obj获取
this.$ router.push({path:‘home',params:{obj:'…'}}) query:参数,可通过this.$route.params.obj获取
this.$router.replace() 此方法不会产生历史记录
this.$router.go(n) 向前或向后跳转n个页面

总结

到此这篇关于Vue项目页面跳转时浏览器窗口上方显示进度条功能的文章就介绍到这了,更多相关vue 页面跳转进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-03-26

vue组件实现进度条效果

本文实例为大家分享了vue实现进度条效果的具体代码,供大家参考,具体内容如下 一.效果图 二.代码 progress-bar.vue <template> <div class="vue-progress-bar default-theme"> <div class="vue-progress-bar__tip"> <span class="vue-progress-bar__tiplabel">{

对vue2.0中.vue文件页面跳转之.$router.push的用法详解

vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .

vue实现登录后页面跳转到之前页面

在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.

Vue页面跳转动画效果的实现方法

前言 现如今移动端APP对用户体验方面的要求越来越高了,最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎有兴趣的朋友多多指教. vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现

Vue进度条progressbar组件功能

效果图 首先我们看一下进度条组件运行出来的效果,如下图显示 进度条组件 实现过程 ◾ 项目搭建 progressbar组件在一个可以直接运行的npm包,通过Yeoman进行构建,再通过Gulp+Webpack构建工具,生成的工作目录如下,其中各个文件夹的内容入之前的一篇文章一样 progressbar组件工作目录 ◾ progressbar源文件之template progressbar组件表现为.vue文件的形式,其中template部分内容如下 progressbar源文件template部

vue页面跳转后返回原页面初始位置方法

vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

vue实现简单loading进度条

刚学习vue不久,今天试着用vue做了一个简单的loading进度条,对于vue的生命周期和钩子函数又有了新的理解,下面分享给大家,绝对入门级. 一.进度条原理 这个就很简单了,也是我们经常可以用到的,这里只做一个最简单的,页面刷新自动加载进度条.主要是让进度条的width不断增加至100%就可以啦~好了,进入正题. 二.jquery实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset

vue从一个页面跳转到另一个页面并携带参数的解决方法

1.需求: 点击商场跳转到商业体列表 解决方案: 元页面: a标签中添加跳转函数 <a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo('M000989')"><i class="sIRicon"></i>商场</a>

vue路由拦截及页面跳转的设置方法

路由设置:router/index.js export default new Router({ routes: [ { path: '/selfcenter', name: 'selfcenter', meta: { requireAuth: true // 配置此条,进入页面前判断是否需要登陆 }, component: selfcenter } ] }) main.js: /* eslint-disable no-new */ router.beforeEach((to, from, ne

Vue仿微信app页面跳转动画效果

10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面的时候,默认的组件转场效果过于生硬,根本就没有动画效果.于是我用Vue提供的组件过渡功能,写了个仿微信app页面跳转的动画,以提高用户体验. 废话不多说,直接上图 在600元骁龙632安卓测试机效果流畅. 代码量很少,已上传至GitHub https://github.com/YellowDoing

Vue 路由切换时页面内容没有重新加载的解决方法

第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

当vue路由变化时,改变导航栏的样式方法

当我们需要做一个类似顶部 或 底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件, 并且改变导航栏按钮的样式,如果用<router-link to=""><router-link/> 跳转的时候,我们可以这样做, 改变router-link-active 的样式,它是路由path指向当前组件时系统自动生成的. 先看下效果: 贴上我的路由文件js export default new Router({ routes: [ { path: '/', co

微信小程序实现页面跳转传值的方法

微信小程序实现页面跳转传值的方法 比如从index.wxml跳转到aaa.wxml index.wml <navigator url="../aaa/aaa?id=1" > </navigator> 传到aaa.wxml的时候传过去的值为id=1,则需要在aaa.wxml 的js获取到id=1 aaa.js Page({ data: { id:'' }, onLoad: function (options){ var that = this; that.setD

iOS应用开发中实现页面跳转的简单方法笔记

作为新手写的笔记,方便自己记忆: 从android转过来iOS的,对于页面的跳转,找了很多资料,现在记录一下页面跳转的方法. 1.用navigationController 2.直接跳(刚刚在网上找到的,不太熟,有错莫怪) 1.建一个RootViewController,在delegate.h 复制代码 代码如下: @property (strong, nonatomic) UIViewController *viewController; @property (strong, nonatomi

vue 实现axios拦截、页面跳转和token 验证

第一步: 路由 多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 }, component: Repository 第二步: router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (store.sta

vue路由传参页面刷新参数丢失问题解决方案

最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //

Angular 多级路由实现登录页面跳转(小白教程)

本文受众是 Angular 初学者,没有多级路由使用经验,不知道登录页面与主页跳转的实现逻辑,相反,看到这里你就可以结束了,不要浪费时间.下面来看看小白对于登录页面的理解: 上图中左边是导航菜单栏,右边的空白区域是 <router-outlet> 所在区域,即所有实现业务逻辑的组件都在这里显示 - 点击左边导航栏的项目右侧B区域就替换为对应的页面,那么问题来了,登录页面要怎么做? 多级路由实现图 图有点大,看不清楚的放大点看吧.看了这个图相信一部分人已经懂了实现原理了.如果还是不懂,来看下面的