vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换
Posted volodya
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换相关的知识，希望对你有一定的参考价值。
一直以来想完成这个模板，今天刚完成一个基础模板。在刚开始着手的时候想过很多，有些合理有些不合理。同时也借鉴了大牛的文章。
上图是实现的功能。项目中使用了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
https://www.cnblogs.com/malng/p/11448037.html#4394832
以上是关于vue动态配置嵌套页面(含iframe嵌套)可实现白天夜间皮肤切换的主要内容，如果未能解决你的问题，请参考以下文章