Vue - load static resources in public in the project - skill improvement

Application Scenario

When writing the background management system, I encountered a requirement about the function of the heat map. Different pages need to be loaded. This page needs to be updated once a day, so the final solution to requesting the page html is: add the page html + the corresponding folder , placed in the public folder, and the files generated after packaging will be stored in the dist folder. When using this page path in the project, you can get it directly through the 'html page name'.

demand analysis

As shown in the figure below: each tablabel represents a htmlpage, click the corresponding one tab, and the content of the corresponding htmlpage will be displayed below.

the code

1. antd-design-vueThe code is as follows:

<a-tabs type="card" v-model="activeKey" @change="callback">
  <a-tab-pane v-for="item in data" :key="item.url" :tab="item.url">
  </a-tab-pane>
</a-tabs>
<iframe
  :src="src"
  v-if="src"
  frameborder="0"
  width="100%"
  height="1000"
  id="iframeId"
></iframe>

2. After obtaining the data through the interface, assign the activeKey to the first item in the tab list

this.activeKey = this.data && this.data[0] && this.data[0].url;
this.src = this.data && this.data[0] && this.data[0].url + '?' + new Date().getTime();//通过?+时间戳的方式来防止浏览器缓存的出现
this.$nextTick(() => {
    
    //下面的代码是强制刷新iframe的，好像没有什么用处
  document
    .getElementById('iframeId')
    .contentWindow.location.reload(true);
});

3. The method tabtriggered when switchingcallback

callback(val) {
    
    
  this.src = val + '?' + new Date().getTime();
  this.$nextTick(() => {
    
    
    document.getElementById('iframeId').contentWindow.location.reload(true);
  });
},

publichtmlpages stored in the file

Pages distin the packaged folderhtml

The point is that when the same page is loaded, the data in today’s page and yesterday’s page are slightly different, whether the problem of browser cache can be solved by adding a 时间戳form to the page, I will explain after I test.

Finish! ! !

A lot of accumulation, a lot of harvest! ! !