vue嵌套html页面非iframe

你可以使用Vue Router来实现在Vue应用中嵌套HTML页面，而不使用iframe。以下是一个简单的示例：

首先，你需要安装Vue Router：

npm install vue-router

然后，在你的Vue应用的入口文件（通常是`main.js`）中，导入Vue Router并配置路由：

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/page1',
    name: 'Page1',
    component: () => import('./components/Page1.vue')
  },
  {
    path: '/page2',
    name: 'Page2',
    component: () => import('./components/Page2.vue')
  },
  // 其他页面路由配置...
]

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

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

在上面的代码中，我们通过`import`语句引入了两个组件`Page1.vue`和`Page2.vue`，并将它们分别与路由路径`/page1`和`/page2`关联起来。

接下来，在你的Vue组件中，可以使用`<router-view>`标签来渲染嵌套的HTML页面。例如，在一个名为`App.vue`的组件中：

<template>
  <div>
    <h1>My App</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

最后，在`Page1.vue`和`Page2.vue`组件中，你可以编写嵌套的HTML代码：

<template>
  <div>
    <h2>Page 1</h2>
    <!-- 嵌套的HTML代码 -->
  </div>
</template>

<script>
export default {
  name: 'Page1',
}
</script>

这样，当用户访问`/page1`时，Vue Router会将`Page1.vue`组件渲染到`<router-view>`标签中，从而实现在Vue应用中嵌套HTML页面的效果。

希望对你有所帮助！如有任何问题，请随时向我提问。