Vue-router beforeRouteEnter Vue-Resource 请求答案

【问题标题】：Vue-router beforeRouteEnter Vue-Resource requestVue-router beforeRouteEnter Vue-Resource 请求
【发布时间】：2017-06-01 09:50:37
【问题描述】：

我已使用此链接作为参考，在输入路线之前提出请求： 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 回调中显示它，它应该将它分配给 vm.cities 也不在 watch $route 部分。

感谢任何帮助/意见。

【问题讨论】：

你有没有想过这个问题？我想我遇到了类似的问题。
不幸的是，还没有。每个人都一直在参考我的文档，但似乎找不到解决方案。最近没有尝试很多，但很快会再做一次。会及时通知你@tjeezy
你用的是什么版本的vue和vue-router？另外，您是否将console.log 语句贯穿始终？你确定err 是假的？
恐怕它根本不会去那里。没有错误，也没有显示城市。我已经把 console.logs 放在了 watch 中，也没有放在 beforeRouteEnter 中
你能展示你的路由是如何设置的或者你挂载的 Vue 应用实例吗？

标签： vuejs2 vue-router vue-resource

【解决方案1】：

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

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

【讨论】：