Question

我在输入路线之前使用此链接作为参考来提出请求： https://router.vuejs.org/en/advanced/data-fetching.html

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)

function getCities () {
    return Vue.http({
    method: 'GET',
    url: process.env.base_url + 'cities'
  })
}

export default {
  data () {
    return {
      cities: []
    }
  },

  beforeRouteEnter (to, from, next) {
    getCities((err, cities) => {
      if (err) {
        next(false)
      } else {
        next(vm => {
          vm.cities = cities.data
        })
      }
    }) 
   },

   watch: {
     $route () {
       this.cities = []

       getCities((err, cities) => {
         if (err) {
           this.error = err.toString()
         } else {
           this.cities = cities.data
         }
       })
     }
   }

然而，它似乎并不适合我。我已经测试了这段代码，并且请求已成功完成。但是结果没有返回。目前，请求本身是从函数返回的，但是我无法在beforeRouteEnter回调中显示它，它应该在watch $ route部分中将它分配给vm.cities。

感谢任何帮助/意见。

Answer 1

Vue.http方法返回一个promise，因此代码应为：

beforeRouteEnter (to, from, next) {
  getCities().then(response => {
    next(vm => vm.cities = response.body)
  }
}

Vue-router beforeRouteEnter Vue-Resource请求

1 个答案: