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

'admin-21.01.21:处理动态路由及路由无限级缓存'

Browse Source
This commit is contained in:
lyt 2021-01-21 18:59:16 +08:00
parent df3f55a7c0
commit 1db2cba283
15 changed files with 160 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,11 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
import { store } from "/@/store/index.ts";
// 定义动态路由
export const dynamicRoutes = [
{
path: '/',
name: '/',
component: () => import('/@/views/layout/index.vue'),
redirect: '/home',
meta: {
@ -14,6 +17,7 @@ export const dynamicRoutes = [
},
children: [{
path: '/home',
name: 'home',
component: () => import('/@/views/home/index.vue'),
meta: {
title: '首页',
@ -32,8 +36,8 @@ export const dynamicRoutes = [
title: '系统设置',
isLink: '',
isHide: false,
icon: 'iconfont icon-xitongshezhi',
isKeepAlive: true
isKeepAlive: true,
icon: 'iconfont icon-xitongshezhi'
},
children: [
{
@ -44,8 +48,8 @@ export const dynamicRoutes = [
title: '菜单管理',
isLink: '',
isHide: false,
icon: 'iconfont icon-caidan',
isKeepAlive: true
isKeepAlive: true,
icon: 'iconfont icon-caidan'
}
},
{
@ -56,78 +60,92 @@ export const dynamicRoutes = [
title: '用户管理',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-icon-',
isKeepAlive: false
}
}
]
},
{
path: '/limits',
name: 'limits',
component: () => import('/@/views/layout/routerView/parent.vue'),
redirect: '/limits/frontEnd',
meta: {
title: '权限管理',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-quanxian'
},
children: [
{
path: '/limits/frontEnd',
name: 'limitsFrontEnd',
component: () => import('/@/views/layout/routerView/parent.vue'),
redirect: '/limits/frontEnd/page',
meta: {
title: '前端控制',
isLink: '',
isHide: false
isHide: false,
isKeepAlive: true
},
children: [
{
path: '/limits/frontEnd/page',
name: 'limitsFrontEndPage',
component: () => import('/@/views/limits/frontEnd/page/index.vue'),
meta: {
title: '页面权限',
isLink: '',
isHide: false
isHide: false,
isKeepAlive: true
}
},
{
path: '/limits/frontEnd/btn',
name: 'limitsFrontEndBtn',
component: () => import('/@/views/limits/frontEnd/btn/index.vue'),
meta: {
title: '按钮权限',
isLink: '',
isHide: false
isHide: false,
isKeepAlive: true
}
}
]
},
{
path: '/limits/backEnd',
name: 'limitsBackEnd',
component: () => import('/@/views/layout/routerView/parent.vue'),
meta: {
title: '后端控制',
isLink: '',
isHide: false
isHide: false,
isKeepAlive: true
},
children: [
{
path: '/limits/backEnd/page',
name: 'limitsBackEndEndPage',
component: () => import('/@/views/limits/backEnd/page/index.vue'),
meta: {
title: '页面权限',
isLink: '',
isHide: false
isHide: false,
isKeepAlive: true
}
},
{
path: '/limits/backEnd/btn',
name: 'limitsBackEndEndBtn',
component: () => import('/@/views/limits/backEnd/btn/index.vue'),
meta: {
title: '按钮权限',
isLink: '',
isHide: false
isHide: false,
isKeepAlive: true
}
}
]
@ -136,64 +154,76 @@ export const dynamicRoutes = [
},
{
path: '/menu',
name: 'menu',
component: () => import('/@/views/layout/routerView/parent.vue'),
redirect: '/menu/menu1',
meta: {
title: '路由嵌套',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-xitongshezhi'
},
children: [
{
path: '/menu/menu1',
name: 'menu1',
component: () => import('/@/views/layout/routerView/parent.vue'),
redirect: '/menu/menu1/menu11',
meta: {
title: '菜单1',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-caidan'
},
children: [
{
path: '/menu/menu1/menu11',
name: 'menu11',
component: () => import('/@/views/menu/menu1/menu11/index.vue'),
meta: {
title: '菜单11',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-caidan'
}
},
{
path: '/menu/menu1/menu12',
name: 'menu12',
component: () => import('/@/views/layout/routerView/parent.vue'),
redirect: '/menu/menu1/menu12/menu121',
meta: {
title: '菜单12',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-caidan'
},
children: [
{
path: '/menu/menu1/menu12/menu121',
name: 'menu121',
component: () => import('/@/views/menu/menu1/menu12/menu121/index.vue'),
meta: {
title: '菜单121',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-caidan'
}
},
{
path: '/menu/menu1/menu12/menu122',
name: 'menu122',
component: () => import('/@/views/menu/menu1/menu12/menu122/index.vue'),
meta: {
title: '菜单122',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-caidan'
}
}
@ -201,11 +231,13 @@ export const dynamicRoutes = [
},
{
path: '/menu/menu1/menu13',
name: 'menu13',
component: () => import('/@/views/menu/menu1/menu13/index.vue'),
meta: {
title: '菜单13',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-caidan'
}
}
@ -213,11 +245,13 @@ export const dynamicRoutes = [
},
{
path: '/menu/menu2',
name: 'menu2',
component: () => import('/@/views/menu/menu2/index.vue'),
meta: {
title: '菜单2',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-caidan'
}
}
@ -225,87 +259,104 @@ export const dynamicRoutes = [
},
{
path: '/fun',
name: 'funIndex',
component: () => import('/@/views/fun/index.vue'),
meta: {
title: '功能',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-crew_feature'
}
},
{
path: '/pages',
name: 'pagesIndex',
component: () => import('/@/views/pages/index.vue'),
meta: {
title: '页面',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-fuzhiyemian'
}
},
{
path: '/components',
name: 'componentsIndex',
component: () => import('/@/views/components/index.vue'),
meta: {
title: '组件',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-zujian'
}
},
{
path: '/chart',
name: 'chartIndex',
component: () => import('/@/views/chart/index.vue'),
meta: {
title: '大数据图表',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-ico_shuju'
}
},
{
path: '/personal',
name: 'personal',
component: () => import('/@/views/personal/index.vue'),
meta: {
title: '个人中心',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-gerenzhongxin'
}
},
{
path: '/tools',
name: 'tools',
component: () => import('/@/views/tools/index.vue'),
meta: {
title: '工具类集合',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-gongju'
}
},
{
path: '/link',
name: 'link',
component: () => import('/@/views/layout/routerView/parent.vue'),
meta: {
title: '外链',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-caozuo-wailian'
}
},
{
path: '/iframe',
component: () => import('/@/views/layout/routerView/iframe.vue'),
path: '/iframes',
name: 'iframes',
component: () => import('/@/views/layout/routerView/iframes.vue'),
meta: {
title: '内嵌 iframe',
isLink: '',
isHide: false,
isKeepAlive: true,
icon: 'iconfont icon-neiqianshujuchucun'
}
}]
}
]
// 定义静态路由
const staticRoutes: Array<RouteRecordRaw> = [
{
path: '/login',
@ -337,14 +388,61 @@ const staticRoutes: Array<RouteRecordRaw> = [
}
]
// 添加静态路由
const router = createRouter({
history: createWebHashHistory(),
routes: staticRoutes
})
dynamicRoutes.map((route) => {
router.addRoute(route as RouteRecordRaw);
});
// 多级嵌套数组处理成一维数组
export function formatFlatteningRoutes(arr: any) {
if (arr.length < 0) return false
for (let i = 0; i < arr.length; i++) {
if (arr[i].children) {
arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1))
}
}
return arr
}
// 多级嵌套数组处理后的一维数组，再处理成 `定义动态路由` 的格式
// 只保留二级：也就是二级以上全部处理成只有二级，keep-alive 支持二级缓存
// isKeepAlive 处理 `name` 值，进行缓存。顶级关闭，全部不缓存
export function formatTwoStageRoutes(arr: any) {
if (arr.length < 0) return false
const newArr: any = []
const cacheList: Array<string> = []
arr.map((v: any) => {
if (v.path === '/') {
newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] })
} else {
newArr[0].children.push({ ...v })
if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive) {
cacheList.push(v.name)
store.dispatch('setCacheKeepAlive', cacheList)
}
}
})
return newArr
}
// 添加动态路由
export function setAddRoute() {
formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).map((route: any) => {
router.addRoute(route as RouteRecordRaw)
})
}
// 删除/重置路由
export function resetRoute() {
formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).map((route: any) => {
const { name } = route
router.hasRoute(name) && router.removeRoute(name)
})
}
// 初始化执行函数
setAddRoute()
// router.afterEach((to, from) => {

19
vue-admin-wonderful-next/src/store/index.ts
View File

@ -1,7 +1,6 @@
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import themeConfig from '/@/utils/themeConfig.ts'
import { dynamicRoutes } from '/@/router/index.ts'
export interface RootStateTypes {
themeConfig: {
isDrawer: boolean,
@ -42,7 +41,8 @@ export interface RootStateTypes {
columnsAsideStyle: string,
layout: string
},
routes: Array<object>
routes: Array<object>,
caches: Array<string>
}
export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
@ -50,7 +50,8 @@ export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
export const store = createStore<RootStateTypes>({
state: {
themeConfig,
routes: []
routes: [],
caches: []
},
mutations: {
getThemeConfig(state: any, data: object) {
@ -58,15 +59,21 @@ export const store = createStore<RootStateTypes>({
},
getRoutes(state: any, data: Array<object>) {
state.routes = data
},
getCacheKeepAlive(state: any, data: Array<string>) {
state.caches = data
}
},
actions: {
setThemeConfig({ commit }, data: object) {
commit('getThemeConfig', data)
},
async setRoutes({ commit }) {
commit('getRoutes', dynamicRoutes)
}
async setRoutes({ commit }, data: any) {
commit('getRoutes', data)
},
async setCacheKeepAlive({ commit }, data: Array<string>) {
commit('getCacheKeepAlive', data)
},
}
})

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

@ -73,6 +73,11 @@ body,
.layout-mian-height-50 {
height: calc(100vh - 50px);
}
.layout-columns-warp {
flex: 1;
display: flex;
overflow: hidden;
}
}
/* element plus 全局样式

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

@ -786,10 +786,6 @@
width: 24px;
text-align: center;
}
// 获取焦点时
.el-menu-item:focus {
background: transparent !important;
}
/* Tabs 标签页
------------------------------- */

5
vue-admin-wonderful-next/src/views/layout/component/aside.vue
View File

@ -18,6 +18,7 @@ import {
onBeforeMount,
} from "vue";
import { useStore } from "/@/store/index.ts";
import { dynamicRoutes } from "/@/router/index.ts";
import Logo from "/@/views/layout/logo/index.vue";
import Vertical from "/@/views/layout/navMenu/vertical.vue";
export default {
@ -31,8 +32,8 @@ export default {
});
// 设置/过滤路由（非静态路由/是否显示在菜单中）
const setFilterRoutes = () => {
store.dispatch("setRoutes");
state.menuList = filterRoutesFun(store.state.routes[0].children);
store.dispatch("setRoutes", dynamicRoutes[0].children);
state.menuList = filterRoutesFun(store.state.routes);
};
// 路由过滤递归函数
const filterRoutesFun = (arr: Array<object>) => {

2
vue-admin-wonderful-next/src/views/layout/main/columns.vue
View File

@ -1,7 +1,7 @@
<template>
<el-container class="layout-container">
<ColumnsAside />
<div style="flex:1;display: flex;">
<div class="layout-columns-warp">
<Aside />
<el-container class="flex-center">
<Header v-if="isFixedHeader" />

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

@ -172,7 +172,7 @@ export default {
margin-right: 5px;
border-radius: 2px;
position: relative;
z-index: 3;
z-index: 0;
cursor: pointer;
justify-content: space-between;
&:hover {

4
vue-admin-wonderful-next/src/views/layout/routerView/iframe.vue → vue-admin-wonderful-next/src/views/layout/routerView/iframes.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
iframeIndex
iframes
<el-input v-model="val"></el-input>
</div>
</template>
@ -8,7 +8,7 @@
<script lang="ts">
import { toRefs, reactive } from "vue";
export default {
name: "iframeIndex",
name: "iframes",
setup() {
const state = reactive({
val: "",

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

@ -2,8 +2,8 @@
<div>
<router-view v-slot="{ Component, route }">
<transition :name="setTransitionName" mode="out-in">
<keep-alive include="home,systemMenu">
<component :is="Component" />
<keep-alive :include="getCaches">
<component :is="Component" :key="route.path" />
</keep-alive>
</transition>
</router-view>
@ -18,12 +18,13 @@ import {
reactive,
getCurrentInstance,
watch,
onBeforeMount,
} from "vue";
import { useRouter, RouteRecordRaw } from "vue-router";
import { useStore } from "/@/store/index.ts";
export default defineComponent({
name: "layoutParentView",
setup() {
const router = useRouter();
const { proxy } = getCurrentInstance();
const store = useStore();
const state = reactive({
@ -44,6 +45,10 @@ export default defineComponent({
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
// 获取组件缓存列表(name值)
const getCaches = computed(() => {
return store.state.caches;
});
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(store.state.themeConfig, (val) => {
state.headerHeight = val.isTagsview ? "84px" : "50px";
@ -54,6 +59,7 @@ export default defineComponent({
});
return {
getThemeConfig,
getCaches,
setTransitionName,
...toRefs(state),
};

4
vue-admin-wonderful-next/src/views/menu/menu1/menu11/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
menuMenu11
menu11
<el-input v-model="val"></el-input>
</div>
</template>
@ -8,7 +8,7 @@
<script lang="ts">
import { toRefs, reactive } from "vue";
export default {
name: "menuMenu11",
name: "menu11",
setup() {
const state = reactive({
val: "",

4
vue-admin-wonderful-next/src/views/menu/menu1/menu12/menu121/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
menuMenu121
menu121
<el-input v-model="val"></el-input>
</div>
</template>
@ -8,7 +8,7 @@
<script lang="ts">
import { toRefs, reactive } from "vue";
export default {
name: "menuMenu121",
name: "menu121",
setup() {
const state = reactive({
val: "",

4
vue-admin-wonderful-next/src/views/menu/menu1/menu12/menu122/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
menuMenu122
menu122
<el-input v-model="val"></el-input>
</div>
</template>
@ -8,7 +8,7 @@
<script lang="ts">
import { toRefs, reactive } from "vue";
export default {
name: "menuMenu122",
name: "menu122",
setup() {
const state = reactive({
val: "",

4
vue-admin-wonderful-next/src/views/menu/menu1/menu13/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
menuMenu13
menu13
<el-input v-model="val"></el-input>
</div>
</template>
@ -8,7 +8,7 @@
<script lang="ts">
import { toRefs, reactive } from "vue";
export default {
name: "menuMenu13",
name: "menu13",
setup() {
const state = reactive({
val: "",

4
vue-admin-wonderful-next/src/views/menu/menu2/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
menuMenu2
menu2
<el-input v-model="val"></el-input>
</div>
</template>
@ -8,7 +8,7 @@
<script lang="ts">
import { toRefs, reactive } from "vue";
export default {
name: "menuMenu2",
name: "menu2",
setup() {
const state = reactive({
val: "",

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

@ -1,6 +1,6 @@
<template>
<div>
toolsIndex
tools
<el-input v-model="val"></el-input>
</div>
</template>
@ -8,7 +8,7 @@
<script lang="ts">
import { toRefs, reactive } from "vue";
export default {
name: "toolsIndex",
name: "tools",
setup() {
const state = reactive({
val: "",