@sxxwz-ui/router v0.0.4
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