Question

我在Vue.js中重用了我的组件，并尝试使用'beforeRouteEnter'导航保护更新该组件内的数据字段。但是组件没有更新。我应该使用其他导航仪吗？

beforeRouteEnter (to, from, next) {
    this.getServices()
    next()
  },
methods: {
getServices() {
    axios.get('/service').then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)  
    })
  }
}

Answer 1

beforeRouteEnter无权访问this。您将必须使用在对象范围之外定义的函数，并在下一步之前调用该函数。传递给next的参数是您的vue组件对象，以便您可以设置组件的属性。

类似的事情会起作用：

beforeRouteEnter (to, from, next) {
  axios.get('/service').then(res => {
    next(vm => {
      vm.res = res
    })
  }).catch(err => {
    next(vm => {
      vm.err = err
    })
  })
}

如何在Vue.js中使用导航保护？

1 个答案: