• 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

  • 相关阅读:
    sqlalchemy 转json 的几种常用方式
    程序员的思维模型指南
    软件的本质
    Python数据模型及Pythonic编程
    Linux Kernel C语言编程范式
    U-Boot内存管理
    Linux网络文件系统的实现与调试
    Linux内核内存管理架构
    Linux多核并行编程关键技术
    Go/Python/Erlang编程语言对比分析及示例
  • 原文地址:https://www.cnblogs.com/volodya/p/11942950.html
Copyright © 2020-2023  润新知