从零搭建自己的Vue管理端框架(五)

1,132 阅读1分钟
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。另求各路大神指点,感谢大家。