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

時間 2019-12-19

標籤搭建本身 vue 管理框架简体版

原文原文鏈接

Hello你們好，本章咱們添加外部連接跳轉功能。有問題能夠聯繫我mr_beany@163.com。另求各路大神指點，感謝

因爲系統整合其餘資源例如java的druid，swagger ui或其餘緣由，咱們須要在系統內展現外部連接。以往咱們經過HTML中iframe標籤來呈現，咱們知道Vue是單頁面應用，那麼在Vue中，咱們是如何操做的呢？vue

一：建立iframe容器

建立page→iframe→iframe.vuejava

<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
git

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}
      ]
    }
  ]
}) 複製代碼

三：修改菜單列表github

將Home.vue中方法getMenuList()修改以下vue-router

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"}
            ]
          }
        ];
      },複製代碼