Question

我对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提供默认值来解决此问题，但这会引出下一个问题：

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

Answer 1

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

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

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

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

1 个答案: