vue.js - 如何在vue-router路由期间展示进度条?

查看:157
本文介绍了vue.js - 如何在vue-router路由期间展示进度条?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

需求:
使用vue1.0、vux、vue-router,当路由切换期间,由于拉取数据的时候产生延时,为了让用户耐心地等待,打算使用progress组件告诉用户正在加载。

我的思路:
1.因为progress是全局都需要的,所以我把它放在全局组件的位置
2.当路由地址发生改变,在全局上使用router.beforeEach勾子来改变progress组件的数据:progress、show
3.组件树如下:
-RootApp
  -progress
  -View-Router(此处为Home)

我的思路遇到的问题
如果是在全局上使用router.beforeEach,我不知道如何从全局上跟progress组件进行通信进而修改它的数值。

我的代码:
main.js

/*已经导入vue、vue-router*/
import app from "./components/App"
import progress from "vux/src/components/progress"
import Home from "./Home"

var router = new VueRouter();
Vue.component("progress", progress);
router.map({
        '/': {
            component: Home
        }
});

router.beforeEach(function(transition){
        // 如何跟progress组件通讯?
        transition.next()
    })

router.start(app, "#app");

App.vue

<div id="wrapper">
    <progress :percent.sync="percent"></progress>
    <router-view></router-view>
</div>

Home.vue忽略

欢迎回答以及提出新的思路

解决方案

根据 vue-router 文档,

data 切换钩子会在 activate 被断定( resolved )以及界面切换之前被调用。切换进来的组件会得到一个名为 $loadingRouteData 的元属性,其初始值为 true ,在 data 钩子函数被断定后会被赋值为 false 。这个属性可用来会切换进来的组件展示加载效果。

因此可以使用 $loadingRouteData<template> 里面进行逻辑判断,具体如下:

<div v-if="$loadingRouteData">
    <progress></progress>
</div>
<div v-if="!$loadingRouteData">
    加载后的内容
</div>

至于进度值,提供一点思路:

  • 如果只是加载文件的话,可以自行写逻辑代码去判断加载文件的完成程度。

  • 如果是 Promise 这种的话(比如 ajax 请求),进度条可以考虑跑个虚假值~

这篇关于vue.js - 如何在vue-router路由期间展示进度条?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆