Javascript Vue js组件在没有页面刷新的情况下不呈现数据

我只需要在一个组件上显示jsonp回调数据。我在加载Readers组件时动态地将js脚本添加到html头部。回调函数中的数据将显示在页面上。但是，当我移动到主路径并返回到读取路径时，回调中的数据不会显示。数据仅在刷新网页时显示。 这是回调函数脚本：

mounted() {
      this.fetchData()    
    }, 

    methods: {
      fetchData() {        
        let universalisScript = document.createElement('script');
        universalisScript.setAttribute('type', 'application/javascript');
        universalisScript.setAttribute('src', "/js/universalis.js"),
        universalisScript.setAttribute('src', "/js/universalis.js"),
        universalisScript.async = true,
        document.head.appendChild(universalisScript),
        document.head.removeChild(universalisScript);
      }
    }

---

有没有人可以指导我，在不刷新页面的情况下，如何显示数据？让我们详细分析一下为什么失败，为什么不应该采用这种方法，以及如何解决问题

为什么失败？ 失败的原因只有一个，那就是脚本标记中的javascript将自上而下运行，因此，对于每个页面加载，回调只运行一次。路由更改是通过编程完成的，而不是页面的实际更改，这就是为什么它被称为单页面应用程序（SPA），因为所有事情都发生在一个页面上

为什么不应采用这种方法？ 因为每次装载阅读组件时，它都会向头部添加一个脚本标记，因为页面已经加载，所以根本不会执行

你能做些什么来解决它？ 使用后，在经历了这些之后，您将了解什么是页面组件。现在可以异步加载页面组件，因此，您可以创建一个阅读页面组件，从API接收的有效负载中填充其数据属性，并将其传递给阅读组件属性，如下所示：

如果您使用的是Nuxt.js

<template>
  <div>
    <readings :readings-data="universalisData" />
  </div>
</template>
<script>
import Readings from '@/components/Reading'
import axios from 'axios'
import adapter from 'axios-jsonp'

export default {
  components: {
   Readings,
  },
  asyncData() { // This is a Nuxt.js feature and not a vue feature
    return axios({ url: 
      'universalis.com/Asia.India/20190124/jsonpmass.js',
       adapter: jsonpAdapter,
       callbackParamName: 'universalisCallback' })
    .then(response => {
      /**
       The following return will pre populate the data property of the
       vue component without any explicit defining of 'universalisData'
       in the data property.
      **/
      return { universalisData: response }
     })
    .catch(error => {
      return {}
     })
   },
   data() {
    return {
     // No need to set 'universalIsData' if you populate from asyncData 
    }
   }

}
</script>

从“@/components/Reading”导入读数
从“axios”导入axios
从“axios jsonp”导入适配器
导出默认值{
组成部分：{
阅读，
},
asyncData（）{//这是一个Nuxt.js功能，而不是vue功能
返回axios（{url:
“universalis.com/Asia.India/20190124/jsonpmass.js”，
适配器：jsonpAdapter，
callbackParamName:'universalisCallback'}）
。然后（响应=>{
/**
下面的返回将预填充
vue组件，没有任何“universalisData”的明确定义
在数据属性中。
**/
返回{universalisData:response}
})
.catch（错误=>{
返回{}
})
},
数据（）{
返回{
//如果从asyncData填充，则无需设置“universalIsData”
}
}
}

如果您仅使用Vue

<template>
  <div>
    <readings :readings-data="universalisData" />
  </div>
</template>
<script>
import Readings from '@/components/Reading'
import axios from 'axios'
import adapter from 'axios-jsonp'

export default {
  components: {
   Readings,
  },
  data() {
   return {
     universalisData: {},
    }
  }
  methods: {
   getUniversalisData() {
    return axios({ url: 
      'universalis.com/Asia.India/20190124/jsonpmass.js',
       adapter: jsonpAdapter,
       callbackParamName: 'universalisCallback' })
    .then(response => {
      return response
     })
    .catch(error => {
      return {}
     })
   },
  },
   created() { // or any other lifecycle event you want to listen to as per your discernment
     this.getUniversalisData()
       .then(response => {
         this.universalisData = response
       })
       .catch(error => {
         this.universalisData = {}
       })
   }
}
</script>

从“@/components/Reading”导入读数
从“axios”导入axios
从“axios jsonp”导入适配器
导出默认值{
组成部分：{
阅读，
},
数据（）{
返回{
通用数据：{}，
}
}
方法：{
getUniversalisData（）{
返回axios（{url:
“universalis.com/Asia.India/20190124/jsonpmass.js”，
适配器：jsonpAdapter，
callbackParamName:'universalisCallback'}）
。然后（响应=>{
返回响应
})
.catch（错误=>{
返回{}
})
},
},
已创建（）{//或根据您的判断力想要收听的任何其他生命周期事件
这是getUniversalisData（）
。然后（响应=>{
this.universalisData=响应
})
.catch（错误=>{
this.universalisData={}
})
}
}

---

这样，每次读取页面组件加载而不是页面刷新时，它都会获取读取数据，填充页面组件的数据属性，您可以将其传递给读取组件的道具。但是请记住，

asyncData

只适用于页面组件，而不适用于Nuxt.js中的任何组件。

让我们详细分析一下它失败的原因，为什么不应该采用这种方法，以及如何解决它

为什么失败？ 失败的原因只有一个，那就是脚本标记中的javascript将自上而下运行，因此，对于每个页面加载，回调只运行一次。路由更改是通过编程完成的，而不是页面的实际更改，这就是为什么它被称为单页面应用程序（SPA），因为所有事情都发生在一个页面上

为什么不应采用这种方法？ 因为每次装载阅读组件时，它都会向头部添加一个脚本标记，因为页面已经加载，所以根本不会执行

你能做些什么来解决它？ 使用后，在经历了这些之后，您将了解什么是页面组件。现在可以异步加载页面组件，因此，您可以创建一个阅读页面组件，从API接收的有效负载中填充其数据属性，并将其传递给阅读组件属性，如下所示：

如果您使用的是Nuxt.js

<template>
  <div>
    <readings :readings-data="universalisData" />
  </div>
</template>
<script>
import Readings from '@/components/Reading'
import axios from 'axios'
import adapter from 'axios-jsonp'

export default {
  components: {
   Readings,
  },
  asyncData() { // This is a Nuxt.js feature and not a vue feature
    return axios({ url: 
      'universalis.com/Asia.India/20190124/jsonpmass.js',
       adapter: jsonpAdapter,
       callbackParamName: 'universalisCallback' })
    .then(response => {
      /**
       The following return will pre populate the data property of the
       vue component without any explicit defining of 'universalisData'
       in the data property.
      **/
      return { universalisData: response }
     })
    .catch(error => {
      return {}
     })
   },
   data() {
    return {
     // No need to set 'universalIsData' if you populate from asyncData 
    }
   }

}
</script>

从“@/components/Reading”导入读数
从“axios”导入axios
从“axios jsonp”导入适配器
导出默认值{
组成部分：{
阅读，
},
asyncData（）{//这是一个Nuxt.js功能，而不是vue功能
返回axios（{url:
“universalis.com/Asia.India/20190124/jsonpmass.js”，
适配器：jsonpAdapter，
callbackParamName:'universalisCallback'}）
。然后（响应=>{
/**
下面的返回将预填充
vue组件，没有任何“universalisData”的明确定义
在数据属性中。
**/
返回{universalisData:response}
})
.catch（错误=>{
返回{}
})
},
数据（）{
返回{
//如果从asyncData填充，则无需设置“universalIsData”
}
}
}

如果您仅使用Vue

<template>
  <div>
    <readings :readings-data="universalisData" />
  </div>
</template>
<script>
import Readings from '@/components/Reading'
import axios from 'axios'
import adapter from 'axios-jsonp'

export default {
  components: {
   Readings,
  },
  data() {
   return {
     universalisData: {},
    }
  }
  methods: {
   getUniversalisData() {
    return axios({ url: 
      'universalis.com/Asia.India/20190124/jsonpmass.js',
       adapter: jsonpAdapter,
       callbackParamName: 'universalisCallback' })
    .then(response => {
      return response
     })
    .catch(error => {
      return {}
     })
   },
  },
   created() { // or any other lifecycle event you want to listen to as per your discernment
     this.getUniversalisData()
       .then(response => {
         this.universalisData = response
       })
       .catch(error => {
         this.universalisData = {}
       })
   }
}
</script>

从“@/components/Reading”导入读数
从“axios”导入axios
从“axios jsonp”导入适配器
导出默认值{
组成部分：{
阅读，
},
数据（）{
返回{
通用数据：{}，
}