淘先锋技术网

首页 1 2 3 4 5 6 7

在使用Vue开发网页应用时,有些情况下需要加载静态页面,这里就介绍一下如何使用Vue加载静态页面。

vue怎么加载静态页

首先需要在Vue实例中导入需要加载的静态页面模板,可以通过以下代码实现:


<template>
  <div v-html="templateContent"></div>
</template>

<script>
import template from './staticPage.html'

export default {
  data () {
    return {
      templateContent: ''
    }
  },
  mounted () {
    this.templateContent = template
  }
}
</script>

在上述代码中,我们使用了v-html指令来将templateContent渲染为HTML代码,并通过mounted钩子函数在Vue实例加载时将template中的模板内容赋值给templateContent。

需要注意的是,在加载静态页面时,Vue不会对其中的代码进行编译和解析,因此在静态页面中使用Vue指令和组件是无效的。

在上面的代码中,我们使用了ES6的import语法导入静态页面模板,如果需要支持低版本的浏览器,可以使用jQuery的$.get()方法来加载静态页面:


<template>
  <div v-html="templateContent"></div>
</template>

<script>
export default {
  data () {
    return {
      templateContent: ''
    }
  },
  mounted () {
    $.get('./staticPage.html', html => {
      this.templateContent = html
    })
  }
}
</script>