Vue.js Vue路由器：无法读取属性'$路线'；未定义-VueJS的定义

请检查我的代码

<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>

从“axios”导入axios
导出默认值{
异步数据（参数）{
让{data}=等待axios.get（'http://localhost:8000/api/v1/users/“+this.$route.params.id+”/”）
返回{
员额：数据
}
},
组成部分：{
“发布详细信息”：项目
}
}

---

我遇到了以下错误：

当我从params.id异步数据时，无法读取未定义的属性“$route”

，但当我键入：console.log（this.$route.params.id）时，它会正确运行。如何修复此问题

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

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

，并且它无权访问

此

。（详见元件逻辑搭配）

@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

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

异步数据（{store，route}）{
让{data}=wait axios.get（'localhost:8000/api/v1/users/'；+this.$route.params.id+'/'））
返回{
员额：数据
}
}

对于SSR，您可以更改

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

异步数据（{store，route}）{
让{data}=wait axios.get（'localhost:8000/api/v1/users/'+this.$route.params.id+'/'））
返回{
员额：数据
}
}

到

异步数据（{route}）{
让{data}=wait axios.get（'localhost:8000/api/v1/users/'+route.params.id+'/'））
返回{
员额：数据
}
}

---

根据nuxt教程，您不能在asyncData中访问此，因为它是在启动组件之前调用的

你能在你的导出中做

console.log（这个）

吗？我很确定您将需要vue实例来访问路由。我猜您无法访问

内部
异步数据
。根据
nuxt
文档的外观（我从未使用过它），您需要在上下文中传递以获取路由参数：
asyncData（{params，context}）
然后您可以通过以下方式访问它：
context.params.id
@craig_\h我可以用其他方式而不是asyncData来编写API以获取数据吗？响应返回Unfine，兄弟！！在这种情况下？在此代码中，
asyncData
放在
methods
中，并且必须有它。$routeoh抱歉，我将
data
更改为
response
。我把它改正过来。试试这个；）它工作得很好。投票支持你的答案。多谢各位@Mikhail:）但是有没有一种更短的方法可以做到这一点？试着将
这个。$route
更改为
路由
内部
异步数据
，并告诉我发生了什么请使用.runtime.esm.js:472[Vue warn]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的，例如，在中嵌套块级元素，或者缺少。因此，这是关于ssr问题的警告，而不是关于
路由
。现在axios是否正常工作（
数据
包含来自服务器的真实数据）？你在github上有这个项目吗？你能给它一个搜索ssr问题的链接吗？修复：异步异步数据（{route}）{let{data}=wait-axios.get（''+route.params.username+'/'）返回{users:data}，
  <script>
    async asyncData ({ route }) { 
     let { data} = await axios.get('localhost:8000/api/v1/users/' + route.params.id + '/') 
     return {
      posts: data
     }
    }
  </script>