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

问题描述

问 题

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

我的思路：
1.因为progress是全局都需要的，所以我把它放在全局组件的位置
２.当路由地址发生改变，在全局上使用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屋！