Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to load external HTML in VUE page". In daily operation, I believe that many people have doubts about how to load external HTML in VUE page. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubt of "how to load external HTML in VUE page". Next, please follow the editor to study!

The front and rear ends are separated, and the back end provides an interface. But some of the data, comparing product description files, are stored on other servers.

Therefore, when the page is displayed, if the description file is displayed in the form of an embedded page. Something needs to be done to achieve the desired effect.

Unlike previous IFRAME tags, it compares Low that way, and there are other BUG.

The idea of this article is to load the HTML request into the page in the form of v-html. Register global components [v-html-panel]

HtmlPanel.vue file

Export default {

/ / Please use: url.sync= "" to pass the value when using

Props: {

Url: {

Required: true

}

}

Data () {

Return {

Loading: false

Html:''

}

}

Watch: {

Url (value) {

This.load (value)

}

}

Mounted () {

This.load (this.url)

}

Methods: {

Load (url) {

If (url & & url.length > 0) {

/ / loading

This.loading=true

Let param= {

Accept: 'text/html, text/plain'

}

This.$http.get (url, param). Then ((response) = > {

This.loading=false

/ / processing HTML display

This.html=response.data

}). Catch () = > {

This.loading=false

Failed to load this.html=''

})

}

}

}

}

HtmlViewSample.vue

Div {color:red}

Export default {

Data () {

Return {

Url1:''

Url2:''

}

}

Mounted () {

This.url1=''

This.url2=''

}

Methods: {

}

}

Note:

GET requests processed directly using axios, which need to be processed across domains

The external css style acts on the displayed html

At the same time, the script in the loaded external html may also be executed, which needs to be processed on demand.

The relative path inside the external HTML file will not be recognized automatically, and the absolute path can

NGINX cross-domain configuration:

(if Origin uses *, it seems to make an error. Here, the address of the request source is directly used. If you are worried about security, you can use the if+ regular condition to judge.)

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

...

}

At this point, the study on "how to load external HTML in VUE pages" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.