一. 应用需求
在vue开发项目的过程中，需要在自己的页面框架中，引用别人做的页面功能，但又不想直接跳转，失去整个系统的统一性，只想在这个子页面（子路由里跳转），那么如何实现呢？
很简单！iframe就可以帮我们完成! 本文将以嵌入哔哩哔哩为例，实际开发中，你需要嵌入什么就嵌入什么，只需要在路由中更改名字和链接的url即可。
二、实现过程
1、侧边栏的实现
以下代码都是在sideMenu.vue侧边栏组件中实现
1.1 template页面显示部分——为侧边栏绑定单击事件
<template>
<div>
<Menu :active-name="$route.name" theme="dark" width="auto" :class="menuitemClasses" @on-select="menuClick" :open-names="openNames">
<!--其他菜单元素-->
<!--……-->
<MenuItem name="LinkHome" @click.native="gotoPage(graphItems.path)">
<i class="iconfont icon-zhishitupu" :class="isCollapsed?'menu-icon-collapsed':''"></i>
<span v-if="!isCollapsed">哔哩哔哩</span>
</MenuItem>
<!--……-->
<!--其他菜单元素-->
</Menu>
</div>
</template>
1.2 设置数据(data return部分)
data () {
return {
// …… 其他数据
graphItems: {
name:'哔哩哔哩',
path:'LinkHome'
}
// …… 其他数据
}
},
1.3 methods方法
methods:{
// …… 其他方法
onClickLeft() {
this.$router.go(-1);
},
gotoPage(path){
this.$router.push(path);
// store存储目标外链的url及要显示的标题
// link和title写在路由配置里的meta参数下
this.$store.state.iframeSrc = this.$route.meta.link
this.$store.state.iframeTitle = this.$route.meta.title
},
// …… 其他方法
}
2、在store.js中加上iframeSrc和iframeTitle两个值
state: {
...
iframeSrc:'',
iframeTitle: ''
},
3、vue-router路由的配置
routes: [
// 其他父级页面路由配置
{
path: '/system',
name: 'system',
component: resolve => require(['@/components/system/system'], resolve),
children: [
// 其他子页面路由配置
// 。。。
{
path: 'LinkHome',
name: 'LinkHome',
meta: {
// 之后你自己的项目中需要嵌入什么就改link属性值即可。
title: '哔哩哔哩',
link: 'https://www.bilibili.com/'
},
// 你的LinkHome.vue组件放的目录位置
component: resolve => require(['@/components/bilibili/LinkHome'], resolve)
},
// 其他页面路由配置
// 。。。
]
},
],
2、LinkHome.vue的实现
<template>
<div>
<div id="iframe-container">
<iframe :src="$store.state.iframeSrc" scrolling="auto" frameborder="0" class="trend-container2" id="iframe"></iframe>
</div>
</div>
</template>
<script>
// 进度条的使用需要安装NProgress,并在main.js注册一哈
import NProgress from 'nprogress'
export default {
name: "LinkHome",
mounted() {
let iframe = document.getElementById('iframe')
NProgress.start()
iframe.onload = function() {
NProgress.done()
}
},
}
</script>
<style scoped>
.trend-container2 {
position: relative;
width: 100%;
min-height: 700px;
padding-bottom: 16px;
}
</style>
给 iframe 的 src 属性绑定值，且为目标外部页面地址。即可嵌套加载外部页面。
页面加载状态使用NProgress。
需要安装NProgressnpm install --save nprogress;
并在main.js注册引入
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
在 vue.js 的 mounted 生命周期内，开始加载进度条。
NProgress.start()
获取 iframe 元素，当 iframe 页面加载完成后，关闭进度条。
iframe.onload = function() {
NProgress.done()
}
当后退或者关闭当前页面时，也应该一并关闭进度条提示。因为当页面还没有加载完时，后退或者关闭页面，将会导致进度条一直存在。
参考资料
https://segmentfault.com/a/1190000021601305
这个作者还引入了vant，为了响应页面中返回和叉掉两个按键的事件。
本项目中不需要，就省略了vant。