使用vue-router通过data获取数据的顺序问题

Question

通过vue-router的data获取数据，在页面上显示，每次都提示：

vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "user.city.name": TypeError: Cannot read property 'name' of undefined

但页面却能正确显示name, 控制台提示name undefined，我输出日志看应该是先渲染了页面，然后才获取到了值。

但是vue-router的官方文档提到：

data 切换钩子会在 activate 被断定（ resolved ）以及界面切换之前被调用

那为什么会出现和官方文档描述不一致的顺序？求高手解答。

或者针对这种情况，有没有什么更合适的解决方式？

谢谢！

代码大致如下：

//html代码
<p>{{ user.city.name }}</p>

 // JS
export default {
 data () {
      return {
        user: {}
      }
 },
 route: {
      data (transition) {
        this.$http.post('url', {params}).then((response) => {
          let data = JSON.parse(response.body)
          this.user = data
        })
      }
 },
}

Answer 1

兄弟，这不是route的问题。

看错误提示，是user.city值为undefined导致报错的，在ajax完成之前的情况你应该非常清楚，因此需要在初始化data时，设置city属性为对象

Answer 2

嗯。我看文档里面data钩子函数都是通过transition.next(data)进行的。。。

个人猜测是如果钩子函数有调用transition.next时，会等待transition.next。之后再渲染。

而题主代码里面是直接赋值，可能就直接运行完路由，然后你获取到值了，再赋值。没有一个等待的过程。。。

题主不妨试试transition.next({user: data})

Answer 3

修改为应该就可以

data () {
      return {
        user: {
            city:{}
        }
      }
 }