当数据被获取时，调用next()。

Question

我正在使用这个npm包 vue-progressbar 但它显示的进度条，而数据在获取中。

我想实现的是，例如，当我点击某个产品时，我不想离开我当前的路径，直到数据在 ProductsShow 组件，然后进度条将完成并调用 next() 的方法，前往 ProductsShow 组件的路径

有什么办法可以做到这一点吗，比如检查我所要去的路径的组件中的数据是否被获取，这样我就可以完成进度条并调用 next() 办法

Answer 1

是的，要做到这一点，你需要利用以下功能 beforeRouteEnter 在您的目标组件中。类似于这里的Vue Router文档。.

<script>
export default {
  beforeRouteEnter(to, from, next) {
    axios.get('/data/i/need')
      .then(function(response) {
        next(vm => {
          vm.myData = response.data // depends on the shape of your data and your destination component
        })
      })
      .catch(function(error) {
        next(false)  // or redirect to an error page?
      })
  }
}
</script>

如果你的路由在params中包含一个id，你可以在beforeRouteEnter中使用 to.params.myIdValueOrWhatever.