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": "https://www.baidu.com/",
 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": "https://www.taobao.com/",
 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": "https://www.jd.com/",
 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": "https://es6.ruanyifeng.com/#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": "https://es6.ruanyifeng.com/#docs/regex",
 93                     "inframe":"https://www.taobao.com/"
 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": "https://es6.ruanyifeng.com/#docs/regex",
112                     "inframe": "https://www.baidu.com/"
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": "https://www.baidu.com/",
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": "https://www.jd.com/",
146                             "inframe": ""
147                         }
148                     }
149                 ]
150             },
151             {
152                 "path": "external-link",
153                 "component": "Layout",
154                 "children": [
155                     {
156                         "path": "https: //github.com/PanJiaChen/vue-element-admin",
157                         "meta": {
158                             "title": "External Link",
159                             "icon": "link"
160                         }
161                     }
162                 ]
163             }
164         ]
165     }
166 }

View Code

组件路由信息生成前端菜单，在这里就不赘述啦。

接下来说下如何在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"> inframe
 6     <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() {
16     return {
17       inframe: ""
18     };
19   },
20   mounted() {
21     // 从路由里动态获取 url地址   具体地址看libs下util.js里的 backendMenuToRoute  方法
22     this.getinframe();
23   },
24   watch: {
25     $route: async function() {
26       // 监听路由变化
27       await this.getinframe();
28     }
29   },
30   methods: {
31     getinframe() {
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>

View Code

以上可以在vue单页项目中指定的<router-view/>中打开通过iframe嵌套的外部链接或者html页面，本项目中只需要准备一个空白vue组件就行（如上述代码）

如果需要在新窗口下打开嵌入的外部链接，如下图配置路由表即可：

参考文章：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD

https://www.cnblogs.com/malng/p/11448037.html#4394832