先看最终效果
1.png
在老项目中添加
在页面需要展示内容的地方放一个 iframe 标签用于导入打包后的代码，如上图的右侧，代码如下：
<html>
<div id="main">
<!-- menu 部分省略 -->
<!-- content 部分 -->
<iframe :src="contentSrc" id="myiframe" name="myiframe" style="width: 100%;" scrolling="no"frameborder="0"></iframe>
</div>
</html>
<script>
// data 中声明 contentSrc,切换菜单时改变 contentSrc，同时调用 setIframeHeight 函数
new Vue({
el: '#main',
data: {
contentSrc: './index.html#/page1' // 路由地址
}
})
</script>
<script>
// 改变 iframe 高度
function setIframeHeight(appHeight) {
var iframe = document.getElementById('myiframe');
if (iframe) {
iframe.height = appHeight || 800;
}
}
</script>
在 vue-cli 项目中添加
要保证页面高度改变时， iframe 也能同时改变，需要在vue-cli 开发的项目中使用 element-resize-detector 检测 div 的高度变化，div 高度改变时调用上方声明的 setIframeHeight 函数把高度作为参数传入。在 app.vue 添加代码如下：
// 安装
npm i element-resize-detector
<script>
// 引入
import elementResizeDetectorMaker from "element-resize-detector";
export default {
name: "app",
mounted() {
// 绑定hashchange事件处理函数
window.addEventListener("hashchange", () => {
var currentPath = window.location.hash.slice(1); // 获取输入的路由
if (this.$router.path !== currentPath) {
this.$router.push(currentPath); // 动态跳转
}
}, false);
// 监听 div 高度
const _this = this;
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById("app"), element => {
_this.$nextTick(() => {
if (typeof window.parent.setIframeHeight === "function") {
// 调用改变高度方法
window.parent.setIframeHeight(element.offsetHeight);
}
});
});
}
};
</script>
这样 iframe 的高度就随着 div 的高度变化而变化，就完成了老项目中嵌套 vue 单页应用(SPA)
