在beforeRouteEnter中访问应用程序

Question

我想显示一些加载动画在应用程序根，而一个组件准备由vue路由器呈现。

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

问题是，当将深链接到某个路由(初始url包含一个路由路径，例如'someurl#/foo')时，这个方法不起作用。那么，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); 
  })
}

感觉有点烦躁，所以要感谢别人的建议。

在这里找到这个解决方案的演示：https://s.codepen.io/schellmax/debug/aYvXqx/GnrnbVPBXezr#/foo

Answer 2

我相信你的解决方案是正确的。但是，我建议改用next()函数。写在vue-路由器文档中。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:
    }
  }
}