在theRouteEnter

Question

我希望在应用程序根目录中显示一些加载动画，同时组件准备由vue路由器呈现。

已经找到this question，建议使用导航警卫，another question，其中接受的答案显示如何使用beforeEach警卫在app中设置变量，显示加载动画。

问题在于在深度链接到某个路线时不起作用（初始网址包含路径路径，例如＆＃39; someurl＃/ foo＆＃39;） 。 beforeEach后卫根本就没有被召唤。

所以我切换到加载的组件beforeRouteEnter后卫，这也允许我只显示某些组件的加载动画：

应用程式：

var app = new Vue({
  el: '#app',
  data: { loading: false }
  router: router
});

成分：

var Foo = { 
  template: '<div>bar</div>',
  beforeRouteEnter: function(to, from, next) {
    app.loading = true; // 'app' unavailable when deep-linking
    // do some loading here before calling next()...
    next();
  }
}

但后来我发现，当深度链接到组件时，app中beforeRouteEnter不可用，因为它在初始化过程中很早就被调用了。

我不想在应用数据声明中将loading设置为true，因为我可能会在某个时候决定深度链接到另一条路线，而该路线的组件并非如此。需要加载动画。

Answer 1

使用Vue.nextTick找到解决方法：

beforeRouteEnter: function(to, from, next) {
    Vue.nextTick(function(){
      // now app is available
      app.loading = true;
      // some loading to happen here...
      seTimeout(function(){            
        app.loading = false;
        next();  
    }, 1000); 
  })
}

感觉有点hacky，所以感谢其他建议。

在此处查找此解决方案的演示： https://s.codepen.io/schellmax/debug/aYvXqx/GnrnbVPBXezr#/foo

Answer 2

我相信，你的解决方案是正确的。但是，我建议使用next（）函数。正如在vue-router docs中所写的那样。 https://router.vuejs.org/en/advanced/navigation-guards.html

  

beforeRouteEnter后卫无法访问此内容，因为在确认导航之前会调用后卫，因此尚未创建新的输入组件。

     

但是，您可以通过将回调传递给next来访问该实例。确认导航时将调用回调，组件实例将作为参数传递给回调函数：

beforeRouteEnter (to, from, next) {
  next(vm => {
    vm.$root.loading = true;
  })
}

Answer 3

如果使用beforeRouteLeave来触发加载，那么让组件在mounted中将其切换为关闭状态。

对于您可以拥有的应用的初始加载

应用：

var app = new Vue({
  el: '#app',
  data() => ({ loading: true }),
  mounted() { this.loading: false },
  router: router
});

然后是你的组件

<强>组件：

var Foo = { 
  template: '<div>bar</div>',
  mounted() {
    app.loading = false;
  },
  beforeRouteLeave(to, from , next) {
    switch(to){
      case COMPONENT_TO_SHOW_LOADING_ON:
      case OTHER_COMPONENT:
        app.loading = true;
      default:
    }
  }
}