beforeRouteEnter: (to, from, next) => { //加载数据 console.log("进入路由之前") next(vm => { //进入路由之前执行getData方法 vm.getData() }); }, beforeRouteLeave: (to, from, next) => { console.log("离开路由之前") next(); }, methods: { getData: function () { this.axios({ method: 'get', url: 'http://localhost:8080/data.json' }).then(function (response) { console.log(response.data["name"]) }) } } 如何将response展示到html中

可以将接收到的数据保存到 Vue 实例中的一个数据属性中，然后在模板中使用插值表达式将数据展示出来。

假设你想将 response 中的 name 属性展示在页面上，你可以在 Vue 实例中定义一个名为 name 的数据属性，并在 getData 方法中将 response.data.name 赋值给它。然后，在模板中使用插值表达式将 name 展示出来，例如：

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log("进入路由之前")
    next(vm => {
      vm.getData()
    });
  },
  methods: {
    getData() {
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/data.json'
      }).then(response => {
        this.name = response.data.name
      })
    }
  }
}
</script>

这个例子中，name 属性被初始化为空字符串。在 getData 方法中，使用 axios 发送请求获取数据，并将 response.data.name 赋值给 name 属性。在模板中，使用插值表达式将 name 展示出来，当数据更新时，页面上的内容也会随之更新。