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
项目地址
写文章不易,如对您有帮助,请帮忙点下star
结尾
添加外部链接跳转功能已完成,后续功能接下来陆续更新,有问题可以联系我mr_beany@163.com。另求各路大神指点,感谢大家。