從零搭建自己的Vue管理端框架（五）

Mr_初晨發表於2019-03-31
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


從零搭建自己的Vue管理端框架（五）

從零搭建自己的Vue管理端框架（五）

專案地址

gitee.com/beany/myVue

github.com/MyBeany/myV…

寫文章不易，如對您有幫助，請幫忙點下star

結尾

新增外部連結跳轉功能已完成，後續功能接下來陸續更新，有問題可以聯絡我mr_beany@163.com。另求各路大神指點，感謝大家。


相關文章