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

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 提供默认值来修复它，但这会引出下一个问题:

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

Answer 1

如果是异步加载，那么我认为为 foo 设置默认值的方法是正确的。那时，将负载放在 beforeRouteEnter 中还是仅放在创建的函数中并不重要。

就显示中间状态而言，我所做的只是拥有最初为真的“pageLoading”变量。然后我有一个 v-if='pageLoading' {//渲染微调器或任何你想要它在加载时看起来像的东西} v-else {//正常渲染页面}。这样你就可以在异步加载发生之前让你的导航栏和类似的东西(if/else 之外的任何东西)出现，这样它就不会在加载期间看起来像一个奇怪的空白页面。

当然，当异步加载 promise 完成时，您将 pageLoading 设置为 false。