name: 'app',
components: {
F1,
F2
},
}
</script>
上面代码简单来说，关键的地方首先是main.js初始化路由时，对iframe页不填写属性component，这样页面就是空白的。然后在 router-view 节点旁边渲染iframe页组件，使用$route.path判断当前路由的指向，控制iframe页的 显示与隐藏 。
上面代码简单的解决了问题，但还有一些地方可以优化：
iframe页在根节点App.vue一渲染时 已经渲染 了，对此iframe页可以做成 懒加载 ，只有在进入过相应页面了触发渲染，并且渲染过之后就用v-show切换显示与隐藏
每当增加一个iframe页都要增加一段的组件引入注册和调用的代码。比较 繁琐 。我们目标应该做到每增加一个iframe页，只需要添加尽量少的代码。这里思路是：
在路由配置中定义一个属性，用于 标识该页面是否含有iframe 的页面
根据标识，iframe页组件 自动动态注册和渲染 ，无需再手写额外的代码
router-view和iframe切换的逻辑封装成 新组件 ，用它 替代原有的router-view
我们先修改router的配置,增加一个属性名iframeComponent，用于标识是否包含iframe，该属性的值是组件文件引用
main.js:
import F1 from './components/f1';
import F2 from './components/f2';const routes = [
{
path: '/f1',
name: 'f1',
iframeComponent: F1 // 用于标识是否含有iframe页
},
{
path: '/f2',
name: 'f2',
iframeComponent: F2 // 用于标识是否含有iframe页
},
{
path: '/index',
component: { template: '<div>Index</div>' }
}
]
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
});
new Vue({
render: h => h(App),
router
}).$mount('#app')
接下来我们第二步和第三步结合在一起，封装新的组件iframe-router-view.vue：
<template>
<div>
<!-- Vue的router-view -->
<keep-alive>
<router-view></router-view>
</keep-alive> <!-- iframe页 -->
<component
v-for="item in hasOpenComponentsArr"
:key="item.name"
:is="item.name"
v-show="$route.path === item.path"
></component>
</div>
</template>
<script>
import Vue from 'vue/dist/vue.js'
export default {
created() {
// 设置iframe页的数组对象
const componentsArr = this.getComponentsArr();
componentsArr.forEach((item) => {
Vue.component(item.name, item.component);
});
this.componentsArr = componentsArr;
// 判断当前路由是否iframe页
