从零搭建本身的Vue管理端框架（五）

Hello你们好，本章咱们添加外部连接跳转功能 。有问题能够联系我mr_beany@163.com。另求各路大神指点，感谢

因为系统整合其余资源例如java的druid，swagger ui或其余缘由，咱们须要在系统内展现外部连接。以往咱们经过HTML中iframe标签来呈现，咱们知道Vue是单页面应用，那么在Vue中，咱们是如何操做的呢？

一：建立iframe容器

建立page→iframe→iframe.vue

<template>
  <div>
    <iframe :src="query" class="iframeView"></iframe>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        query: '',
      }
    },
    created: function () {
      //$route为路由，params为路由传递过来的参数
      this.query = this.$route.params.path;
    }
  }
</script>

<style scoped>
  .iframeView {
    width: 100%;
    background: rgba(255, 255, 255, 1);    border-radius: 5px;
    min-height: calc(100% - 20px);
    border: 0;
  }
</style>复制代码

二：配置iframe路由

修改src→router→index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/page/Home'
import Login from '@/page/Login'
import Index from '@/page/Index'
import User from '@/page/user/user'
import Iframe from '@/page/iframe/iframe'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Login
    },
    {
      path: '/home',
      component: Home,
      children: [
        {path: "", component: Index},
        //：path为传递的参数
        {path:"/Iframe/:path", component:Iframe},
        {path:"/user", component:User}
      ]
    }
  ]
}) 复制代码

三：修改菜单列表

将Home.vue中方法getMenuList()修改以下

getMenuList(){
        this.menuList = [
          {
            menuName: "外部连接", isOpen: 0,
            adminMenuList: [
              {menuName: "百度", isOpen: 0, path: "/Iframe", query: "/https%3A%2F%2Fwww.baidu.com"},
              {menuName: "Element UI", isOpen: 0, path: "/Iframe", query: "/http%3A%2F%2Felement-cn.eleme.io/#/zh-CN"}
            ]
          },
          {
            menuName: "用户管理", isOpen: 0,
            adminMenuList: [
              {menuName: "查看用户", isOpen: 0, path: "/user"}
            ]
          }
        ];
      },复制代码

注意，跳转路径中http://需修改成 转义字符  https%3A%2F%2F

不然系统会把//看成层级路径

四：运行测试

运行npm run dev

项目地址

gitee.com/beany/myVue

github.com/MyBeany/myV…

写文章不易，如对您有帮助，请帮忙点下star

结尾

添加外部连接跳转功能已完成，后续功能接下来陆续更新，有问题能够联系我mr_beany@163.com。另求各路大神指点，感谢你们。