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

【问题标题】：How to properly load async data in vuejs with beforeRouteEnter?如何使用 beforeRouteEnter 在 vuejs 中正确加载异步数据？
【发布时间】：2019-02-28 04:57:04
【问题描述】：

我对 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 是否可以渲染组件的任何中间状态？
它实际上是加载异步数据的正确方法还是我应该考虑其他一些选项？

【问题讨论】：

标签： javascript vuejs2 vue-component vue-router

【解决方案1】：

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

就显示中间状态而言，我所做的只是拥有最初为 true 的“pageLoading”变量。然后我有一个 v-if='pageLoading' { //render spinner 或任何你希望它在加载时看起来像 } v-else { //render page normal }。通过这种方式，您可以在异步加载发生之前显示导航栏等（无论 if/else 之外的内容），因此在加载期间它看起来不仅仅是一个奇怪的空白页面。

当然，当异步加载承诺实现时，您将 pageLoading 设置为 false。

【讨论】：