vue跳转页面增加等待_vue-router懒加载时添加loading效果

近期在做一个微信公众号的项目，在页面跳转时发现页面会闪一下，用户体验很不好，而且如果网慢时页面是没有数据的样式会乱很丑。于是乎，就百度看了前人的各种解决方案，个人觉得以下链接中的方案还是很好的，代码简洁，效果也很满意，不需要每个页面做相对应的操作只需要在router.js文件中添加几行代码即可。

唯一的缺点就是在Android运行没问题，但是ios会有时关不上loading效果一直处于loading状态(而且很频繁)，刚开始我以为是网络的问题，后台切换到4G还是不行。我就各种调试，后来发现加上一个setTimeout便完美的解决了问题，代码如下：

import Vue from 'vue'

import Router from 'vue-router'

//loading组件

import {Indicator} from 'mint-ui';

Vue.use(Router)

let spinRoute = {

show() {//加载中显示loading组件

Indicator.open({spinnerType: 'fading-circle'});//开启loading组件，这里我用的mint-ui

resolve(resolve) {//加载完成隐藏loading组件

return component=>{

setTimeout(()=>{

Indicator.close()//关闭loading组件

resolve(component);

}, 10)

}

export default new Router({

mode: 'hash',

base: process.env.BASE_URL,

routes: [

{

path: '/home',

component: resolve => {

spinRoute.show();//加载时开启loading

require(['./views/Home.vue'], spinRoute.resolve(resolve))//路由懒加载

meta: {

title: '首页'

{

path: '/QRcode',

component: resolve => {

spinRoute.show();

require(['./views/QRcode.vue'], spinRoute.resolve(resolve))

meta: {

title: '游戏推广'

}

{

path: '/NotAgent',

component: resolve => {

spinRoute.show();

require(['./views/NotAgent.vue'], spinRoute.resolve(resolve))

meta: {

title: '友情提示'

}

{path:'*',redirect:'/home'}

]

})

最后，感谢以上链接中的大牛给到大家的解决方案.

vue跳转页面增加等待_vue-router懒加载时添加loading效果相关推荐

vue跳转页面增加等待_vue实现几秒后跳转新页面代码
我就废话不多说了,大家还是直接看代码吧~ 提交 export default { data(){ return { count:"",//倒计时 } } }, mounted(){ ...
vue跳转页面增加等待_vue跳转页面方法
1. router-link1. 不带参数 //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前 ...
vue 跳转页面带对象_vue跳转页面的几种方法(推荐)
vue跳转不同页面的多种方法 1:router-link跳转点击跳转2 点击跳转1 点击跳转3 2:this.$router.push() 点击跳转4 export default{ name:'t ...
Error: Loading chunk * failed，Vue Router懒加载报错问题解决方案
最近vue项目路由改成了懒加载方式,刚开始并没有什么问题,清空项目文件,重新下载配置运行后,就发现控制台报以下错误: [vue-router] Failed to resolve async comp ...
Vue3（撩课学院）笔记07-vueRouter路由，创建路由，路由重定向，路由跳转，动态路由，路由懒加载，路由嵌套，路由参数穿传递的两种形式，通过事件来跳转路由
1.vueRouter路由的两种模式哈希模式:以#号分割,前端路由一般用hash模式比较多,可以兼容ie8以上,井号后面不发起请求历史模式:putstate()和replaceState()方法入 ...
VUE项目中如何实现表格数据的懒加载
vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页处理如果不想分页 ...
jquery 页面滚动条回到顶部_jquery懒加载、回到顶部
思考 1.如果窗口resize了 2.如果节点加入重复了 3.怎样判断元素是在视窗范围内* 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视).写一个函数 isVisi ...
服务器图片加载慢_页面提高性能利器_懒加载
哈喽,艾瑞巴蒂,现在搜狗商城产品需求已经趋于稳定,已经开始逐步的着手进行页面的性能提升工作.这不最近小编正在进行"页面懒加载需求"的功能测试.小编第一次听说这个名词,让我们一起了解 ...
vue 跳转页面带对象_vue从一个页面跳转到另一个页面并携带参数
1.需求: 点击商场跳转到商业体列表解决方案: 元页面: a标签中添加跳转函数商场 toMallInfo: function(mallCode){ this.$router.push({ path ...

vue跳转页面增加等待_vue-router懒加载时添加loading效果

vue跳转页面增加等待_vue-router懒加载时添加loading效果相关推荐

最新文章

热门文章