Vue 3 + TS

本包是根据 ea-router https://toscode.gitee.com/zexzy/ea-router 修改，由于原组件中只提供了vue 2.x + vue-router 3.x 相关方法，未支持 typescript 特此进行代码改造 目标适用于vue3 + Ts，本依赖库目前只支持vue3 +ts项目

依赖库 "vue-class-component": "^8.0.0-0", v8版本的文档还没出来，具体语法规则可以查看项目的 issues 或者 源码

安装

npm i @dth-ui/router

使用

// /src/router/index.js import RouteGenerate from '@dth-ui/router'; let generator = new RouteGenerate(import.meta.glob('../views/**/*.vue', { eager: true }))

generator.setDefaultLayout(appMain) .ignore('../views//components/*', '../views//Login.vue'); generator.setDefaultLayout(appMain)

const route = generator.generate(); const routes: Array = [ { path: "/login", component: () => import("@/views/Login.vue"), }, ...route ];

const router = createRouter({ history: createWebHistory(), routes }); 最终自动生成的路由表： [{ "path": "/login" }, { "path": "/", component: () => import("@/layout/appMain.vue"),

"children": [{ "path": "/500", "name": "Error500", "component": () => import("@/views/500.vue"), "meta": {} }, { "path": "/404", "name": "Error404", "component": () => import("@/views/404.vue"), "meta": {} }, { "path": "/401", "name": "Error401", "component": () => import("@/views/401.vue"), "meta": {} }, { "path": "/base-base", "name": "base", "component": () => import("@/views/base/base.vue") "meta": { "title": "基础页面", "requireAuthorize": true, "group": "基础" } }], "componentPath": "", "redirect": "" }]

根据路由获取菜单 import {getMenus} from '@dth-ui/router'; import { useRouter } from 'vue-router'; const router=useRouter()

const menuList = getMenus(router.options.routes)

generate()

新增默认参数 isMultiple 默认false 针对平级路由 为true时， 在views根目录下新增Layout.vue 用来设置每一个页面的布局，如果未找到layout页面，会设置为默认layout

@RouteName(name: string) decorator

设置路由名称，在vue-router中对应了命名路由

import { Vue, Component } from 'vue-property-decorator'; import { RouteName } from 'ea-router';

@RouteName('YourComponentRouteName') @Component export default class YourComponent extends Vue { } 等价于

const router = new VueRouter({ routes: [ { path: 'path/to/component/on/directory', name: 'YourComponentRouteName', component: YourComponent, } ] })

@Alias(alias: string) decorator

设置路由别名，对应vue-router中的别名

import { Vue, Component } from 'vue-property-decorator'; import { Alias } from 'ea-router';

@Alias('YourComponentAlias') @Component export default class YourComponent extends Vue { } 等价于

const router = new VueRouter({ routes: [ { path: 'path/to/component/on/directory', alias: 'YourComponentAlias', component: YourComponent, } ] })

@Context(params: string[]) decorator

设置路由上下文，对应了vue-router中的$routes.params

会根据传入的顺序生成path。

import { Vue, Component } from 'vue-property-decorator'; import { Context } from 'ea-router';

@Context('id', 'type') @Component export default class YourComponent extends Vue { } 等价于

const router = new VueRouter({ routes: [ { path: 'path/to/component/on/directory/:id/:type', component: YourComponent, } ] })

@Meta(meta: object) decorator

设置路由元信息，对应vue-router中的路由元信息

import { Vue, Component } from 'vue-property-decorator'; import { Meta } from 'ea-router';

@Meta({ title: 'Component Title', requireAuthorize: true }) @Component export default class YourComponent extends Vue { } 等价于

const router = new VueRouter({ routes: [ { path: 'path/to/component/on/directory', component: YourComponent, meta: { title: 'Component Title', requireAuthorize: true }, } ] })

更改

原有组件中多组目录下，每个目录会携带一个layout，但目前我司的后台管理系统中共用一套layout,所以对此进行改造， 删除原有setNotFoundPage配置， 修改原有children 下子项中path命名规则，现根据 目录-子目录-子目录-文件名 @Meta()装饰器中新增参数group 用于自动生成左侧菜单使用 如不使用layout布局，可使用.ignore('../views//components/*', '../views//Login.vue'); 进行过滤 新增 common.js 自动生成左侧菜单，如未配置@Meta()，不生成菜单

问题

无法找到模块“@dth-ui/router”的声明文件。“/Users/wuxinyi/Desktop/dth-ui/packages/iview-plus/node_modules/@dth-ui/router/dth-router.es.js”隐式拥有 "any" 类型。 尝试使用 npm i --save-dev @types/dth-ui__router (如果存在)，或者添加一个包含 declare module '@dth-ui/router'; 的新声明(.d.ts)文件ts(7016)

在项目中的.d.ts文件中添加 declare module '@dth-ui/router';

Metadata