从零搭建自己的Vue管理端框架（五）-白红宇

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

由于系统整合其他资源例如java的druid，swagger ui或其他原因，我们需要在系统内展示外部链接。以往我们通过HTML中iframe标签来呈现，我们知道Vue是单页面应用，那么在Vue中，我们是如何操作的呢？

一：创建iframe容器

创建page→iframe→iframe.vue


    复制代码

二：配置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

项目地址

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

结尾

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