一直以来想完成这个模板，今天刚完成一个基础模板。在刚开始着手的时候想过很多，有些合理有些不合理。同时也借鉴了大牛的文章。
上图是实现的功能。项目中使用了sass实现了白天夜间两套皮肤切换，实现换肤功能。侧边栏菜单数据取自路由表，路由表的数据除login和404页面，全部由后台接口提供，因此用户权限由后台控制。后台会根据用户登录信息返回与用户登录信息相匹配的路由数据表，前台渲染相应的页面。路由表数据json格式如下：
{
"data":{
"routes": [
{
"path": "/",
"component": "Layout",
"redirect": "/dashboard",
"children": [
{
"path": "dashboard",
"component": "dashboard/index",
"name": "Dashboard",
"meta": {
"title": "Dashboard",
"icon": "dashboard",
"affix": true,
"pathUrl": "https://www.baidu.com/",
"inframe":""
}
}
]
},
{
"path": "/documentation",
"component": "Layout",
"children": [
{
"path": "index",
"component": "documentation/index",
"name": "Documentation",
"meta": {
"title": "Documentation",
"icon": "documentation",
"affix": true,
"pathUrl": "https://www.taobao.com/",
"inframe": ""
}
}
]
},
{
"path": "/guide",
"component": "Layout",
"redirect": "/guide/index",
"children": [
{
"path": "index",
"component": "guide/index",
"name": "Guide",
"meta": {
"title": "Guide",
"icon": "guide",
"noCache": true,
"pathUrl": "https://www.jd.com/",
"inframe": ""
}
}
]
},
{
"path": "/profile",
"component": "Layout",
"redirect": "/profile/index",
"children": [
{
"path": "index",
"component": "profile/index",
"name": "Profile",
"meta": {
"title": "Profile",
"icon": "user",
"noCache": true,
"pathUrl": "https://es6.ruanyifeng.com/#docs/regex",
"inframe": ""
}
}
]
},
{
"path": "/taobao",
"component": "Layout",
"redirect": "/taobao/index",
"children": [
{
"path": "index",
"component": "inframe/index",
"name": "taobao",
"meta": {
"title": "淘宝",
"icon": "form",
"noCache": true,
"pathUrl": "https://es6.ruanyifeng.com/#docs/regex",
"inframe":"https://www.taobao.com/"
}
}
]
},
{
"path": "/baidu",
"component": "Layout",
"redirect": "/baidu/index",
"children": [
{
"path": "index",
"component": "inframe/index",
"name": "baidu",
"meta": {
"title": "百度",
"icon": "pdf",
"noCache": true,
"pathUrl": "https://es6.ruanyifeng.com/#docs/regex",
"inframe": "https://www.baidu.com/"
}
}
]
},
{
"path": "/example",
"component": "Layout",
"redirect": "/example/list",
"name": "Example",
"meta": {
"title": "Example",
"icon": "example"
},
"children": [
{
"path": "create",
"component": "example/create",
"name": "CreateArticle",
"meta": {
"title": "Create Article",
"icon": "edit",
"pathUrl": "https://www.baidu.com/",
"inframe": ""
}
},
{
"path": "list",
"component": "example/list",
"name": "ArticleList",
"meta": {
"title": "Article List",
"icon": "list",
"pathUrl": "https://www.jd.com/",
"inframe": ""
}
}
]
},
{
"path": "external-link",
"component": "Layout",
"children": [
{
"path": "https: //github.com/PanJiaChen/vue-element-admin",
"meta": {
"title": "External Link",
"icon": "link"
}
}
]
}
]
}
}组件路由信息生成前端菜单，在这里就不赘述啦。
接下来说下如何在vue单页项目嵌套外部链接，比如在vue单页项目嵌套淘宝，百度。
直接上代码
<template>
<div class="inframe">
<iframe style="border:none" width="100%" height="100%" v-bind:src="inframe"></iframe>
<!-- -->
<div class="fontoutbox"> inframe
<div>{{this.$route.path}}</div>
<div>{{this.$route.meta.inframe}}</div></div>
<!-- -->
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
inframe: ""
};
},
mounted() {
// 从路由里动态获取 url地址 具体地址看libs下util.js里的 backendMenuToRoute 方法
this.getinframe();
},
watch: {
$route: async function() {
// 监听路由变化
await this.getinframe();
}
},
methods: {
getinframe() {
//alert(this.$route.meta.inframe.includes("https"))
let inframestatus = this.$route.meta.inframe.includes("https");
if (inframestatus) {
this.inframe = this.$route.meta.inframe;
}
}
}
};
</script>
<style lang="scss" scoped>
</style>以上可以在vue单页项目中指定的<router-view/>中打开通过iframe嵌套的外部链接或者html页面，本项目中只需要准备一个空白vue组件就行（如上述代码）
如果需要在新窗口下打开嵌入的外部链接，如下图配置路由表即可：
参考文章：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD
