如何使用beforeRouteEnter在vuejs中正确加载异步数据?

时间:2018-09-24 16:14:06

标签: javascript vuejs2 vue-component vue-router

我对vue.js(和vue-router)非常陌生,我试图弄清楚如何加载初始化某些页面组件所需的异步数据。根据文档,可以使用beforeRouteEnter来完成此操作:

const Page = {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.foo = {
        bar: 'blah'
      };
    })
  },
  data() {
    return {
        foo: null
    };
  },
  template: '<div>{{ foo.bar }}</div>'
};

如果我没有正确初始化foo,则组件渲染将失败,并出现错误原因,导致foo.bar在初始化之前被访问。好的,我可以通过为foo提供默认值来解决此问题,但这会引出下一个问题:

  1. 当传递给next的回调尚未执行时,vue.js能否呈现组件的任何中间状态?
  2. 加载异步数据实际上是正确的方法还是我应该考虑其他一些选择?

1 个答案:

答案 0 :(得分:0)

如果是异步加载,那么我认为您为foo设置默认值是正确的方法。那时,将负载放在beforeRouteEnter还是仅在创建的函数中都没有关系。

就显示中间状态而言,我要做的只是拥有最初为true的'pageLoading'变量。然后,我有一个v-if ='pageLoading'{//渲染微调框或加载时想要的任何外观} v-else {//正常渲染页面}。这样,您就可以拥有导航栏,并且这样的内容(无论是否在if / else之外)都会在异步加载发生之前出现,因此在加载过程中它不仅看起来像是一个怪异的空白页。

然后,当异步加载承诺完成时,您当然会将pageLoading设置为false。