Question

请查看我的代码。

<template>
  <div class="row flex">
    <div class="col-md-6 home_feed">
      <post-detail :posts="posts"></post-detail>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    async asyncData (params) {
      let { data } = await axios.get('http://localhost:8000/api/v1/users/' + this.$route.params.id + '/')
      return {
        posts: data
      }
    },
    components: {
      'post-detail': Item
    }
  }
</script>

我收到此错误：Cannot read property '$route' of undefined当我从params.id asyncdata时，但是当我输入：console.log（this。$ route.params.id）时，它就是正确的。我该如何解决这个问题？

Answer 1

如果要在已安装的生命周期中从服务器（来自浏览器）加载数据，请尝试以下命令：

export default {
  data() {
    return {
      data: {}
    }
  },

  mounted() {
    this.asyncData();
  },

  methods: {
    async asyncData ({ route }) {
     let { data} = await axios.get('http://localhost:8000/api/v1/users/' + this.$route.params.id + '/')
     this.data = data
   }
  }
}

来自服务器的响应将在response变量中提供。

对于SSR，你可以这样做：

async asyncData ({ store, route }) { 
  let { data} = await axios.get('localhost:8000/api/v1/users/'; + route.params.id + '/') 
  return {
    posts: data
  }
}

在实例化组件之前将调用

asyncData，并且它无法访问this。（有关详细信息，请参阅https://ssr.vuejs.org/en/data.html 与组件的逻辑配置）

Answer 2

@Mikhail 这段代码很成功：

export default {
  data() {
    return {
      data: {}
    }
  },

  mounted() {
    this.asyncData();
  },

  methods: {
    async asyncData ({ route }) {
     let { data} = await axios.get('http://localhost:8000/api/v1/users/' + route.params.id + '/')
     this.data = data
   }
  }
}

但是，当获取这样的API父子数据时：{{data.user.username}}， data.user未定义。因此API数据会出错。

我使用Nuxt并且您的SSR代码不起作用： 错误：无法读取属性$ route of undefined

<script>
async asyncData ({ store, route }) { 
  let { data} = await axios.get('localhost:8000/api/v1/users/'; + this.$route.params.id + '/') 
  return {
    posts: data
  }
}
</script>

Answer 3

对于SSR，您可以更改

  <script>
  async asyncData ({ store, route }) { 
   let { data} = await axios.get('localhost:8000/api/v1/users/'; +   
   this.$route.params.id + '/') 
   return {
   posts: data
   }
}
</script>

到

  <script>
  async asyncData ({ route }) { 
   let { data} = await axios.get('localhost:8000/api/v1/users/'; +   
   route.params.id + '/') 
   return {
   posts: data
   }
}
</script>

根据nuxt教程，您无法访问asyncData内部的 this ，因为它是在启动组件之前调用的。 Nuxt Documentation

Vue-Router：无法读取属性＆＃39; $ route＆＃39;未定义的 - VueJS

3 个答案: