vue打开html页面

要在Vue中打开HTML页面，你可以使用Vue Router来实现路由导航。首先，你需要安装Vue Router插件：

npm install vue-router

然后，在你的Vue项目中创建一个路由器。在你的`main.js`文件中添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/html',
    name: 'HtmlPage',
    component: () => import('@/views/HtmlPage.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上述代码中，我们定义了一个名为`HtmlPage`的路由，它对应的组件是`HtmlPage.vue`。你可以根据自己的需求修改路径和组件名称。

接下来，你需要创建一个名为`HtmlPage.vue`的组件文件。在该文件中，你可以使用`<iframe>`标签来加载和显示HTML页面。例如，你可以在`HtmlPage.vue`中添加以下代码：

<template>
  <div>
    <iframe src="path/to/your/html/page.html" frameborder="0" width="100%" height="100%"></iframe>
  </div>
</template>

<script>
export default {
  name: 'HtmlPage'
}
</script>

<style scoped>
iframe {
  border: none;
}
</style>

确保将`path/to/your/html/page.html`替换为你想要打开的HTML页面的实际路径。

最后，你可以在你的Vue应用中使用`<router-link>`来导航到HTML页面。例如，在你的组件模板中添加以下代码：

<router-link to="/html">打开HTML页面</router-link>

这样，当你点击"打开HTML页面"链接时，Vue会导航到`/html`路径，并加载`HtmlPage.vue`组件，其中包含你指定的HTML页面。