Vue-router beforeRouteEnter Vue-Resource 请求

Posted 2023-02-22

【中文标题】Vue-router beforeRouteEnter Vue-Resource 请求

【英文标题】：Vue-router beforeRouteEnter Vue-Resource request

【发布时间】：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 应用实例吗？

【参考方案1】：

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

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