vue動態配置嵌套頁面(含iframe嵌套)可實現白天夜間皮膚切換

本文轉載自查看原文 2019-11-27 16:00 815 使用frame 使用網頁動態嵌入換膚切換主題/ vue/ 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue中嵌套頁面（iframe） vue實現app頁面切換效果 vue 頁面點擊圖標動態切換 jquery實現頁面動態切換的方法--toggleClass(className) 關於iframe嵌套、動態獲取iframe內的url、父頁面重定向 Unity腳本設置場景環境光，實現白天晚上切換 vue 給嵌套的iframe子頁面傳數據 postMessage iframe嵌套vue頁面打開新窗口 vue中嵌套頁面 iframe 標簽通過js實現css樣式的動態切換(React,Vue均適用)