VUE 페이지는 외부 HTML 메소드 로딩을 ​​구현합니다.

앞부분과 뒷부분이 분리되어 있으며, 뒷부분이 인터페이스를 제공합니다. 그러나 제품 설명 파일을 비교하는 일부 데이터는 다른 서버에 저장됩니다. 따라서 페이지가 표시될 때 이 설명 파일이 페이지에 인라인 형태로 표시되면 됩니다. 원하는 효과를 얻으려면 뭔가를 수행해야 합니다. 이번 글에서는 주로 VUE 페이지에서 외부 HTML을 로딩하기 위한 샘플 코드를 소개합니다. 편집자 입장에서는 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

이전 IFRAME 태그와 달리 해당 방법은 상대적으로 낮은 수준이며 다른 버그가 있습니다.

이 글의 아이디어는 HTML 요청을 v-html 형식으로 페이지에 로드하는 것입니다. 전역 구성 요소 등록 [v-html-panel]

1.HtmlPanel.vue 파일

<template>
 <p>
  <mu-circular-progress :size="40" v-if="loading"/>
  <p v-html="html"></p>
 </p>
</template>
<style>

</style>
<script>
 export default{
  // 使用时请使用 :url.sync=""传值
  props: {
   url: {
    required: true
   }
  },
  data () {
   return {
    loading: false,
    html: &#39;&#39;
   }
  },
  watch: {
   url (value) {
    this.load(value)
   }
  },
  mounted () {
   this.load(this.url)
  },
  methods: {
   load (url) {
    if (url && url.length > 0) {
     // 加载中
     this.loading = true
     let param = {
      accept: &#39;text/html, text/plain&#39;
     }
     this.$http.get(url, param).then((response) => {
      this.loading = false
      // 处理HTML显示
      this.html = response.data
     }).catch(() => {
      this.loading = false
      this.html = &#39;加载失败&#39;
     })
    }
   }
  }
 }
</script>

htmlViewSample.vue

<template>
 <p>
  <v-html-panel :url.asyc="url1"></v-html-panel>
  <v-html-panel :url.asyc="url2"></v-html-panel>
 </p>
</template>
<style scoped>
 p{color:red}
</style>
<script>
 export default{
  data () {
   return {
    url1: &#39;&#39;,
    url2: &#39;&#39;
   }
  },
  mounted () {
   this.url1 = &#39;http://file.xxx.com/group1/M00/0C/F5/xxxxxxxx.html&#39;
   this.url2 = &#39;http://file.xxx.com/group1/M00/0D/3B/yyyyyyy.html&#39;
  },
  methods: {
  }
 }
</script>

이전 렌더링

참고:

• 크로스 도메인을 처리해야 하는 GET 요청을 처리하기 위해 axios를 직접 사용합니다.

• 외부 CSS 스타일이 표시되는 HTML에 영향을 줍니다

• 동시에 로드된 외부 HTML의 스크립트도 실행될 수 있습니다. 필요합니다. 요청 시 처리됩니다.

• 외부 HTML 파일 내부의 상대 경로는 자동으로 인식되지 않습니다. 절대 경로는

NGINX 교차 도메인 구성:

일 수 있습니다(Origin이 *를 사용하는 경우에는 보안이 걱정된다면 if+regular 조건을 이용해 판단하시면 됩니다.)

location / {
  add_header Access-Control-Allow-Origin $http_origin;
  add_header Access-Control-Allow-Credentials true;
  add_header Access-Control-Allow-Methods GET;

  access_log /data/nginx/logs/fdfs_https.log main;

  ...
}

관련 추천 :

자세히 jQuery에서 외부 CSS 파일을 로드하는 방법에 대한 설명

HTML 외부 로딩 CSS 파일을 위한 두 가지 방법

jquery 지연 로딩 외부 js 구현 code_jquery

위 내용은 VUE 페이지는 외부 HTML 메소드 로딩을 ​​구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!