hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.01.25:处理路由link、iframes跳转及页面切换动画优化等'

Browse Source
This commit is contained in:
lyt 2021-01-25 15:39:59 +08:00
parent 94dd0f7439
commit 0e155e0141
15 changed files with 185 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
vue-admin-wonderful-next/index.html
View File

@ -5,7 +5,7 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/loading.css" /> <link rel="stylesheet" type="text/css" href="/loading.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>demos</title> <title>vue-admin-wonderful-next</title>
</head> </head>
<body> <body>
<div id="app"> <div id="app">

57
vue-admin-wonderful-next/src/router/index.ts
View File

@ -14,6 +14,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: true, isAffix: true,
isIframe: false,
icon: 'iconfont icon-shouye' icon: 'iconfont icon-shouye'
}, },
children: [{ children: [{
@ -26,6 +27,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: true, isAffix: true,
isIframe: false,
icon: 'iconfont icon-shouye' icon: 'iconfont icon-shouye'
} }
}, },
@ -40,6 +42,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-xitongshezhi' icon: 'iconfont icon-xitongshezhi'
}, },
children: [ children: [
@ -53,6 +56,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan' icon: 'iconfont icon-caidan'
} }
}, },
@ -66,6 +70,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-icon-', icon: 'iconfont icon-icon-',
} }
} }
@ -82,6 +87,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-quanxian' icon: 'iconfont icon-quanxian'
}, },
children: [ children: [
@ -95,7 +101,8 @@ export const dynamicRoutes = [
isLink: '', isLink: '',
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false isAffix: false,
isIframe: false
}, },
children: [ children: [
{ {
@ -107,7 +114,8 @@ export const dynamicRoutes = [
isLink: '', isLink: '',
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false isAffix: false,
isIframe: false
} }
}, },
{ {
@ -119,7 +127,8 @@ export const dynamicRoutes = [
isLink: '', isLink: '',
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false isAffix: false,
isIframe: false
} }
} }
] ]
@ -133,7 +142,8 @@ export const dynamicRoutes = [
isLink: '', isLink: '',
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false isAffix: false,
isIframe: false
}, },
children: [ children: [
{ {
@ -145,7 +155,8 @@ export const dynamicRoutes = [
isLink: '', isLink: '',
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false isAffix: false,
isIframe: false
} }
}, },
{ {
@ -157,7 +168,8 @@ export const dynamicRoutes = [
isLink: '', isLink: '',
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false isAffix: false,
isIframe: false
} }
} }
] ]
@ -175,6 +187,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-xitongshezhi' icon: 'iconfont icon-xitongshezhi'
}, },
children: [ children: [
@ -189,6 +202,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan' icon: 'iconfont icon-caidan'
}, },
children: [ children: [
@ -202,6 +216,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan' icon: 'iconfont icon-caidan'
} }
}, },
@ -216,6 +231,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan' icon: 'iconfont icon-caidan'
}, },
children: [ children: [
@ -229,6 +245,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan' icon: 'iconfont icon-caidan'
} }
}, },
@ -242,6 +259,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan' icon: 'iconfont icon-caidan'
} }
} }
@ -257,6 +275,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan' icon: 'iconfont icon-caidan'
} }
} }
@ -272,6 +291,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-caidan' icon: 'iconfont icon-caidan'
} }
} }
@ -288,6 +308,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-crew_feature' icon: 'iconfont icon-crew_feature'
}, },
children: [ children: [
@ -301,6 +322,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'el-icon-thumb' icon: 'el-icon-thumb'
} }
} }
@ -316,6 +338,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-fuzhiyemian' icon: 'iconfont icon-fuzhiyemian'
} }
}, },
@ -329,6 +352,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-zujian' icon: 'iconfont icon-zujian'
} }
}, },
@ -342,6 +366,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-ico_shuju' icon: 'iconfont icon-ico_shuju'
} }
}, },
@ -355,6 +380,7 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-gerenzhongxin' icon: 'iconfont icon-gerenzhongxin'
} }
}, },
@ -368,32 +394,35 @@ export const dynamicRoutes = [
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: false, isAffix: false,
isIframe: false,
icon: 'iconfont icon-gongju' icon: 'iconfont icon-gongju'
} }
}, },
{ {
path: '/link', path: '/link',
name: 'link', name: 'layoutLinkView',
component: () => import('/@/views/layout/routerView/parent.vue'), component: () => import('/@/views/layout/routerView/parent.vue'),
meta: { meta: {
title: '外链', title: '外链',
isLink: '', isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation',
isHide: true, isHide: false,
isKeepAlive: true, isKeepAlive: false,
isAffix: true, isAffix: false,
isIframe: false,
icon: 'iconfont icon-caozuo-wailian' icon: 'iconfont icon-caozuo-wailian'
} }
}, },
{ {
path: '/iframes', path: '/iframes',
name: 'iframes', name: 'layoutIfameView',
component: () => import('/@/views/layout/routerView/iframes.vue'), component: () => import('/@/views/layout/routerView/parent.vue'),
meta: { meta: {
title: '内嵌 iframe', title: '内嵌 iframe',
isLink: '', isLink: 'https://gitee.com/lyt-top/vue-admin-wonderful',
isHide: false, isHide: false,
isKeepAlive: true, isKeepAlive: true,
isAffix: true, isAffix: true,
isIframe: true,
icon: 'iconfont icon-neiqianshujuchucun' icon: 'iconfont icon-neiqianshujuchucun'
} }
}] }]

14
vue-admin-wonderful-next/src/theme/app.scss
View File

@ -38,6 +38,9 @@ body,
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden !important; overflow-x: hidden !important;
.el-scrollbar__view {
overflow: hidden;
}
} }
.el-header { .el-header {
box-shadow: 0 1px 4px rgb(0 21 41 / 4%); box-shadow: 0 1px 4px rgb(0 21 41 / 4%);
@ -46,10 +49,18 @@ body,
.el-main { .el-main {
padding: 0 !important; padding: 0 !important;
overflow: hidden; overflow: hidden;
width: 100%;
} }
.el-scrollbar { .el-scrollbar {
width: 100%; width: 100%;
} }
.layout-view-bg-white {
background: white;
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid rgba(238, 238, 238, 0.6);
}
.layout-el-aside-br-color { .layout-el-aside-br-color {
border-right: 1px solid rgb(238, 238, 238); border-right: 1px solid rgb(238, 238, 238);
} }
@ -111,6 +122,9 @@ body,
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
} }
.flex-margin {
margin: auto;
}
/* 宽高 100% /* 宽高 100%
------------------------------- */ ------------------------------- */

5
vue-admin-wonderful-next/src/theme/common/transition.scss
View File

@ -6,8 +6,8 @@
.slide-left-leave-active { .slide-left-leave-active {
will-change: transform; will-change: transform;
transition: all 0.3s ease; transition: all 0.3s ease;
position: absolute;
} }
// slide-right
.slide-right-enter-from { .slide-right-enter-from {
opacity: 0; opacity: 0;
transform: translateX(-20px); transform: translateX(-20px);
@ -16,17 +16,18 @@
opacity: 0; opacity: 0;
transform: translateX(20px); transform: translateX(20px);
} }
// slide-left
.slide-left-enter-from { .slide-left-enter-from {
@extend .slide-right-leave-to; @extend .slide-right-leave-to;
} }
.slide-left-leave-to { .slide-left-leave-to {
@extend .slide-right-enter-from; @extend .slide-right-enter-from;
} }
// opacitys
.opacitys-enter-active, .opacitys-enter-active,
.opacitys-leave-active { .opacitys-leave-active {
will-change: transform; will-change: transform;
transition: all 0.3s ease; transition: all 0.3s ease;
position: absolute;
} }
.opacitys-enter-from, .opacitys-enter-from,
.opacitys-leave-to { .opacitys-leave-to {

4
vue-admin-wonderful-next/src/theme/element.scss
View File

@ -737,6 +737,10 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.el-menu-item a {
width: 86%;
display: inline-block;
}
// 默认 hover 时 // 默认 hover 时
.el-menu-item:hover, .el-menu-item:hover,
.el-submenu__title:hover { .el-submenu__title:hover {

38
vue-admin-wonderful-next/src/views/layout/component/main.vue
View File

@ -1,10 +1,15 @@
<template> <template>
<el-main> <el-main>
<el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef" <el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef"
v-show="!currentRouteMeta.isLink && !currentRouteMeta.isIframe"
:style="{minHeight: `calc(100vh - ${headerHeight}`}"> :style="{minHeight: `calc(100vh - ${headerHeight}`}">
<LayoutParentView /> <LayoutParentView />
<Footer v-if="getThemeConfig.isFooter" /> <Footer v-if="getThemeConfig.isFooter" />
</el-scrollbar> </el-scrollbar>
<Link :style="{height: `calc(100vh - ${headerHeight}`}" :meta="currentRouteMeta"
v-if="currentRouteMeta.isLink && !currentRouteMeta.isIframe" />
<Iframes :style="{height: `calc(100vh - ${headerHeight}`}" :meta="currentRouteMeta"
v-if="currentRouteMeta.isLink && currentRouteMeta.isIframe" />
</el-main> </el-main>
</template> </template>
@ -16,23 +21,44 @@ import {
reactive, reactive,
getCurrentInstance, getCurrentInstance,
watch, watch,
onBeforeMount,
} from "vue"; } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "/@/store/index.ts"; import { useStore } from "/@/store/index.ts";
import LayoutParentView from "/@/views/layout/routerView/parent.vue"; import LayoutParentView from "/@/views/layout/routerView/parent.vue";
import Footer from "/@/views/layout/footer/index.vue"; import Footer from "/@/views/layout/footer/index.vue";
import Link from "/@/views/layout/routerView/link.vue";
import Iframes from "/@/views/layout/routerView/iframes.vue";
export default defineComponent({ export default defineComponent({
name: "layoutMain", name: "layoutMain",
components: { LayoutParentView, Footer }, components: { LayoutParentView, Footer, Link, Iframes },
setup() { setup() {
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const store = useStore(); const store = useStore();
const route = useRoute();
const state = reactive({ const state = reactive({
headerHeight: "84px", headerHeight: "",
currentRouteMeta: {},
}); });
// 获取布局配置信息 // 获取布局配置信息
const getThemeConfig = computed(() => { const getThemeConfig = computed(() => {
return store.state.themeConfig; return store.state.themeConfig;
}); });
// 初始化当前路由 meta 信息
const initCurrentRouteMeta = (meta: object) => {
state.currentRouteMeta = meta;
};
// 设置 main 的高度
const initHeaderHeight = () => {
let { isTagsview } = store.state.themeConfig;
if (isTagsview) return (state.headerHeight = `84px`);
else return (state.headerHeight = `50px`);
};
// 页面加载前
onBeforeMount(() => {
initCurrentRouteMeta(route.meta);
initHeaderHeight();
});
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度 // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(store.state.themeConfig, (val) => { watch(store.state.themeConfig, (val) => {
state.headerHeight = val.isTagsview ? "84px" : "50px"; state.headerHeight = val.isTagsview ? "84px" : "50px";
@ -41,8 +67,16 @@ export default defineComponent({
proxy.$refs.layoutScrollbarRef.update(); proxy.$refs.layoutScrollbarRef.update();
} }
}); });
// 监听路由的变化
watch(
() => route.path,
() => {
initCurrentRouteMeta(route.meta);
}
);
return { return {
getThemeConfig, getThemeConfig,
initCurrentRouteMeta,
...toRefs(state), ...toRefs(state),
}; };
}, },

1
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue
View File

@ -66,6 +66,7 @@ export default {
}; };
// 当前路由字符串切割成数组，并删除第一项空内容 // 当前路由字符串切割成数组，并删除第一项空内容
const initRouteSplit = (path: string) => { const initRouteSplit = (path: string) => {
if (!store.state.themeConfig.isBreadcrumb) return false;
state.breadcrumbList = [store.state.routes[0]]; state.breadcrumbList = [store.state.routes[0]];
state.routeSplit = path.split("/"); state.routeSplit = path.split("/");
state.routeSplit.shift(); state.routeSplit.shift();

4
vue-admin-wonderful-next/src/views/layout/navBars/index.vue
View File

@ -17,8 +17,8 @@ export default {
const store = useStore(); const store = useStore();
// 是否显示 tagsView // 是否显示 tagsView
const setShowTagsView = computed(() => { const setShowTagsView = computed(() => {
let { layout } = store.state.themeConfig; let { layout, isTagsview } = store.state.themeConfig;
return layout !== "classic"; return layout !== "classic" && isTagsview;
}); });
return { return {
setShowTagsView, setShowTagsView,

4
vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="layout-navbars-tagsview" :class="{'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic'}" <div class="layout-navbars-tagsview" :class="{'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic'}">
v-show="getThemeConfig.isTagsview">
<Scroll ref="scrollRef"> <Scroll ref="scrollRef">
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle"> <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle">
<li v-for="(v,k) in tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li" :data-name="v.name" <li v-for="(v,k) in tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li" :data-name="v.name"
@ -103,6 +102,7 @@ export default {
const addTagsView = (path: string) => { const addTagsView = (path: string) => {
if (state.tagsViewList.some((v) => v.path === path)) return false; if (state.tagsViewList.some((v) => v.path === path)) return false;
const item = store.state.tagsViewRoutes.find((v) => v.path === path); const item = store.state.tagsViewRoutes.find((v) => v.path === path);
if (item.meta.isLink && !item.meta.isIframe) return false;
if (!item.meta.isHide) state.tagsViewList.push({ ...item }); if (!item.meta.isHide) state.tagsViewList.push({ ...item });
addBrowserSetSession(state.tagsViewList); addBrowserSetSession(state.tagsViewList);
}; };

9
vue-admin-wonderful-next/src/views/layout/navMenu/horizontal.vue
View File

@ -12,7 +12,8 @@
</el-submenu> </el-submenu>
<el-menu-item :index="val.path" :key="val.path" v-else> <el-menu-item :index="val.path" :key="val.path" v-else>
<i :class="val.meta.icon ? val.meta.icon : ''"></i> <i :class="val.meta.icon ? val.meta.icon : ''"></i>
<template #title v-if="!val.meta.isLink">{{ val.meta.title }}</template> <template #title
v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">{{ val.meta.title }}</template>
<template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template> <template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>
</el-menu-item> </el-menu-item>
</template> </template>
@ -107,8 +108,14 @@ export default defineComponent({
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
margin-right: 30px; margin-right: 30px;
::v-deep(.el-scrollbar__bar.is-vertical) {
display: none;
}
.el-menu.el-menu--horizontal { .el-menu.el-menu--horizontal {
display: flex; display: flex;
height: 100%;
width: 100%;
box-sizing: border-box;
} }
} }
</style> </style>

2
vue-admin-wonderful-next/src/views/layout/navMenu/subItem.vue
View File

@ -9,7 +9,7 @@
</el-submenu> </el-submenu>
<el-menu-item :index="val.path" :key="val.path" v-else> <el-menu-item :index="val.path" :key="val.path" v-else>
<i :class="val.meta.icon ? val.meta.icon : ''"></i> <i :class="val.meta.icon ? val.meta.icon : ''"></i>
<template v-if="!val.meta.isLink"> <template v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
<span>{{ val.meta.title }}</span> <span>{{ val.meta.title }}</span>
</template> </template>
<template v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template> <template v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>

2
vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue
View File

@ -11,7 +11,7 @@
</el-submenu> </el-submenu>
<el-menu-item :index="val.path" :key="val.path" v-else> <el-menu-item :index="val.path" :key="val.path" v-else>
<i :class="val.meta.icon ? val.meta.icon : ''"></i> <i :class="val.meta.icon ? val.meta.icon : ''"></i>
<template #title v-if="!val.meta.isLink"> <template #title v-if="!val.meta.isLink || val.meta.isLink && val.meta.isIframe">
<span>{{ val.meta.title }}</span> <span>{{ val.meta.title }}</span>
</template> </template>
<template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template> <template #title v-else><a :href="val.meta.isLink" target="_blank">{{ val.meta.title }}</a></template>

46
vue-admin-wonderful-next/src/views/layout/routerView/iframes.vue
View File

@ -1,21 +1,49 @@
<template> <template>
<div> <div class="layout-scrollbar">
iframes <div class="layout-view-bg-white flex h100" v-loading="iframeLoading">
<el-input v-model="val"></el-input> <iframe :src="currentRouteMeta.isLink" frameborder="0" height="100%" width="100%" id="iframe"></iframe>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { toRefs, reactive } from "vue"; import {
export default { defineComponent,
name: "iframes", computed,
setup() { reactive,
toRefs,
onMounted,
nextTick,
} from "vue";
export default defineComponent({
name: "layoutIfameView",
props: {
meta: {
type: Object,
default: () => {},
},
},
setup(props) {
const state = reactive({ const state = reactive({
val: "", iframeLoading: true,
});
// 获取父级菜单数据
const currentRouteMeta = computed(() => {
return props.meta;
});
// 页面加载时
onMounted(() => {
nextTick(() => {
const iframe = document.getElementById("iframe");
iframe.onload = () => {
state.iframeLoading = false;
};
});
}); });
return { return {
currentRouteMeta,
...toRefs(state), ...toRefs(state),
}; };
}, },
}; });
</script> </script>

30
vue-admin-wonderful-next/src/views/layout/routerView/link.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="layout-scrollbar">
<div class="layout-view-bg-white flex">
<a :href="currentRouteMeta.isLink" target="_blank"
class="flex-margin">{{currentRouteMeta.title}}：{{currentRouteMeta.isLink}}</a>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
export default defineComponent({
name: "layoutLinkView",
props: {
meta: {
type: Object,
default: () => {},
},
},
setup(props) {
// 获取父级菜单数据
const currentRouteMeta = computed(() => {
return props.meta;
});
return {
currentRouteMeta,
};
},
});
</script>

13
vue-admin-wonderful-next/src/views/layout/routerView/parent.vue
View File

@ -3,7 +3,7 @@
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="setTransitionName" mode="out-in"> <transition :name="setTransitionName" mode="out-in">
<keep-alive :include="getCaches"> <keep-alive :include="getCaches">
<component :is="Component" :key="refreshRouterViewKey" /> <component :is="Component" :key="refreshRouterViewKey" class="w100" />
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>
@ -38,7 +38,6 @@ export default defineComponent({
const store = useStore(); const store = useStore();
const state = reactive({ const state = reactive({
transitionName: "slide-right", transitionName: "slide-right",
headerHeight: "84px",
refreshRouterViewKey: route.path, refreshRouterViewKey: route.path,
}); });
// 设置主界面切换动画 // 设置主界面切换动画
@ -59,19 +58,11 @@ export default defineComponent({
const getCaches = computed(() => { const getCaches = computed(() => {
return store.state.caches; return store.state.caches;
}); });
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(store.state.themeConfig, (val) => {
state.headerHeight = val.isTagsview ? "84px" : "50px";
if (val.isFixedHeaderChange !== val.isFixedHeader) {
if (!proxy.$refs.layoutScrollbarRef) return false;
proxy.$refs.layoutScrollbarRef.update();
}
});
// 路由更新时 // 路由更新时
onBeforeRouteUpdate((to) => { onBeforeRouteUpdate((to) => {
state.refreshRouterViewKey = to.path; state.refreshRouterViewKey = to.path;
}); });
// 页面加载时 // 页面加载前
onBeforeMount(() => { onBeforeMount(() => {
proxy.mittBus.on("onTagsViewRefreshRouterView", (path: string) => { proxy.mittBus.on("onTagsViewRefreshRouterView", (path: string) => {
if (route.path !== path) return false; if (route.path !== path) return false;