引用地址：vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换 - 长空雁叫霜晨月 - 博客园
项目预览地址:https://volodya-01.github.io/vue2.0_template_themeiframe3_preview/#/dashboard
上图是实现的功能。项目中使用了sass实现了白天夜间两套皮肤切换，实现换肤功能。侧边栏菜单数据取自路由表，路由表的数据除login和404页面，全部由后台接口提供，因此用户权限由后台控制。后台会根据用户登录信息返回与用户登录信息相匹配的路由数据表，前台渲染相应的页面。路由表数据json格式如下：
1 {2"data":{3 "routes": [4 {5 "path": "/",6 "component": "Layout",7 "redirect": "/dashboard",8 "children": [9 {10"path": "dashboard",11"component": "dashboard/index",12"name": "Dashboard",13"meta": {14 "title": "Dashboard",15 "icon": "dashboard",16 "affix": true,17 "pathUrl": "/",18 "inframe":""19}20 }21 ]22 },23 {24 "path": "/documentation",25 "component": "Layout",26 "children": [27 {28"path": "index",29"component": "documentation/index",30"name": "Documentation",31"meta": {32 "title": "Documentation",33 "icon": "documentation",34 "affix": true,35 "pathUrl": "/",36 "inframe": ""37}38 }39 ]40 },41 {42 "path": "/guide",43 "component": "Layout",44 "redirect": "/guide/index",45 "children": [46 {47"path": "index",48"component": "guide/index",49"name": "Guide",50"meta": {51 "title": "Guide",52 "icon": "guide",53 "noCache": true,54 "pathUrl": "/",55 "inframe": ""56}57 }58 ]59 },60 {61 "path": "/profile",62 "component": "Layout",63 "redirect": "/profile/index",64 "children": [65 {66"path": "index",67"component": "profile/index",68"name": "Profile",69"meta": {70 "title": "Profile",71 "icon": "user",72 "noCache": true,73 "pathUrl": "/#docs/regex",74 "inframe": ""75}76 }77 ]78 },79 {80"path": "/taobao",81"component": "Layout",82"redirect": "/taobao/index",83"children": [84 {85 "path": "index",86 "component": "inframe/index",87 "name": "taobao",88 "meta": {89 "title": "淘宝",90 "icon": "form",91 "noCache": true,92 "pathUrl": "/#docs/regex",93 "inframe":"/"94 }95 }96]97 },98 {99"path": "/baidu",100"component": "Layout",101"redirect": "/baidu/index",102"children": [103 {104 "path": "index",105 "component": "inframe/index",106 "name": "baidu",107 "meta": {108 "title": "百度",109 "icon": "pdf",110 "noCache": true,111 "pathUrl": "/#docs/regex",112 "inframe": "/"113 }114 }115]116 },117 {118 "path": "/example",119 "component": "Layout",120 "redirect": "/example/list",121 "name": "Example",122 "meta": {123 "title": "Example",124 "icon": "example"125 },126 "children": [127 {128"path": "create",129"component": "example/create",130"name": "CreateArticle",131"meta": {132 "title": "Create Article",133 "icon": "edit",134 "pathUrl": "/",135 "inframe": ""136}137 },138 {139"path": "list",140"component": "example/list",141"name": "ArticleList",142"meta": {143 "title": "Article List",144 "icon": "list",145 "pathUrl": "/",146 "inframe": ""147}148 }149 ]150 },151 {152 "path": "external-link",153 "component": "Layout",154 "children": [155 {156"path": "https: ///PanJiaChen/vue-element-admin",157"meta": {158 "title": "External Link",159 "icon": "link"160}161 }162 ]163 }164 ]165}166 }
组件路由信息生成前端菜单，在这里就不赘述啦。
接下来说下如何在vue单页项目嵌套外部链接，比如在vue单页项目嵌套淘宝，百度。
直接上代码
1 <template>2 <div class="inframe">3<iframe style="border:none" width="100%" height="100%" v-bind:src="inframe"></iframe>4<!-- -->5<div class="fontoutbox"> inframe6<div>{{this.$route.path}}</div>7<div>{{this.$route.meta.inframe}}</div></div>8<!-- -->9 </div>10 </template>11 12 <script>13 export default {14 name: "index",15 data() {16return {17 inframe: ""18};19 },20 mounted() {21// 从路由里动态获取 url地址 具体地址看libs下util.js里的 backendMenuToRoute 方法22this.getinframe();23 },24 watch: {25$route: async function() {26 // 监听路由变化27 await this.getinframe();28}29 },30 methods: {31getinframe() {32 //alert(this.$route.meta.inframe.includes("https"))33 let inframestatus = this.$route.meta.inframe.includes("https");34 if (inframestatus) {35 this.inframe = this.$route.meta.inframe;36 }37}38 }39 };40 </script>41 42 <style lang="scss" scoped>43 44 </style>
以上可以在vue单页项目中指定的<router-view/>中打开通过iframe嵌套的外部链接或者html页面，本项目中只需要准备一个空白vue组件就行（如上述代码）
如果需要在新窗口下打开嵌入的外部链接，如下图配置路由表即可：
参考文章：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD
