Skip to content

Commit

Permalink
feat: add the router interface which is easily to find anything you need
Browse files Browse the repository at this point in the history
  • Loading branch information
cmdparkour committed Nov 30, 2021
1 parent b769973 commit 2e272e9
Show file tree
Hide file tree
Showing 13 changed files with 89 additions and 46 deletions.
69 changes: 34 additions & 35 deletions src/router/createNode.ts
Original file line number Diff line number Diff line change
@@ -1,46 +1,45 @@
// 1. 用于解决keep-alive需要name的问题,动态生成随机name供keep-alive使用
// 2. 用于解决transition动画内部结点只能为根元素的问题,单文件可写多结点
import type { DefineComponent } from 'vue'
import { defineComponent, h, createVNode, ref, nextTick } from 'vue'
import reload from './reload.vue'
import NProgress from '@/utils/system/nprogress'

export function createNameComponent(component: any) {
return () => {
return new Promise((res) => {
component().then((comm: any) => {
const name = (comm.default.name || 'vueAdminBox') + '$' + Date.now();
const tempComm = defineComponent({
name,
setup() {
const isReload = ref(false);
let timeOut: any = null;
const handleReload = () => {
isReload.value = true;
timeOut && clearTimeout(timeOut);
NProgress.start();
timeOut = setTimeout(() => {
nextTick(() => {
NProgress.done();
isReload.value = false;
});
}, 260);
};
return {
isReload,
handleReload
};
},
render: function () {
if (this.isReload) {
return h('div', { class: 'el-main-box' }, [h(reload)]);
} else {
return h('div', { class: 'el-main-box' }, [createVNode(comm.default)]);
}
export function createNameComponent(component: () => Promise<any>): Promise<DefineComponent<{}, {}, any>> {
return new Promise((resolve) => {
component().then((comm: DefineComponent<{}, {}, any>) => {
const name = (comm.default.name || 'vueAdminBox') + '$' + Date.now();
const tempComm = defineComponent({
name,
setup() {
const isReload = ref(false);
let timeOut: any = null;
const handleReload = () => {
isReload.value = true;
timeOut && clearTimeout(timeOut);
NProgress.start();
timeOut = setTimeout(() => {
nextTick(() => {
NProgress.done();
isReload.value = false;
});
}, 260);
};
return {
isReload,
handleReload
};
},
render: function () {
if (this.isReload) {
return h('div', { class: 'el-main-box' }, [h(reload)]);
} else {
return h('div', { class: 'el-main-box' }, [createVNode(comm.default)]);
}
});
res(tempComm);
}
});
resolve(tempComm);
});
};
});
}

33 changes: 33 additions & 0 deletions src/router/index.type.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import type { DefineComponent } from 'vue'
import { createNameComponent } from './createNode'

/** @name 基础路由类型 */
export interface Route {
/** @name 访问路径 */
path: string
/** @name 需要使用的组件 @description 两种类型,第一种是默认的Vue文件类型,第二种是通过createNameComponent搞出来的,凡是一个组件需要keep-alive,必须使用createNameComponent来搞定 */
component: DefineComponent<{}, {}, any> | Promise<DefineComponent<{}, {}, any>>
/** @name 基础元数据 */
meta: Meta

/** @name 路由名称,全局唯一,可以不填 */
name?: string
/** @name 需要重定向的地址,可选 */
redirect?: string
/** @name 是否总是显示,不设置的话,子元素只有一个的时候默认显示子元素,隐藏父元素 @description 大部分时候针对二级三级四级菜单的根结点 @default false */
alwayShow?: boolean
/** @name 路由子集,和Route类型一致的数组,可选 */
children?: Route[]
}

/** @name 基础元数据的类型说明 */
export interface Meta {
/** @name 标题 @description 可供很多地方使用,在国际化版本中使用i18n对应的值,非国际化版本中使用真实的路由值 */
title: string
/** @name 使用的icon的值,可选 @description 对应自己Iconfont链接库进来,通常只在一级菜单使用,但二级三级使用也没问题 */
icon?: string
/** @name 是否需要缓存页面,目前仅支持二级菜单缓存,多级菜单缓存会在未来支持,可选 @default false */
cache?: boolean
/** @name 任意值 @description 供自行扩展使用,但推荐在上面自己定义好 */
[key: string]: any
}
3 changes: 2 additions & 1 deletion src/router/modules/chart.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/echarts',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/community.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/community',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/component.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/component',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/dashboard.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/directive.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/directive',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/document.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/document',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/menu.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import MenuBox from '@/components/menu/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/menu',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/pages.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/pages',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/print.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/print',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/system.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/system',
component: Layout,
Expand Down
3 changes: 2 additions & 1 deletion src/router/modules/systemManage.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route = [
const route: Route[] = [
{
path: '/systemManage',
component: Layout,
Expand Down

0 comments on commit 2e272e9

Please sign in to comment.