Oinone平台之Router扩展

问题描述

在Oinone平台内置路由中,默认了三种路由

/login //默认登录页
/page //默认主逻辑页
/ //根页面,会自动发起查询优先级最高的应用,并跳转

在实际的业务迭代中,我们通常有以下三种需求:

  1. 我要覆盖默认的登录页,页面我不喜欢,登录逻辑满足不了;
  2. 我要在平台上加个帮助中心;
  3. 这个路径不符合我司规范,我要自定义加前缀

接下来,我将在Oinone平台中满足以上场景

覆盖默认路径

以登录页为例

  1. 在项目目录src/main.ts下,添加自定义router
import 'ant-design-vue/dist/antd.css';
import 'element-plus/dist/index.css';

import '@kunlun/vue-ui-antd/dist/kunlun-vue-ui-antd.css';
import '@kunlun/vue-ui-el/dist/kunlun-vue-ui-el.css';

import 'reflect-metadata';
import { VueOioProvider } from '@kunlun/dependencies';
import interceptor from './middleware/network-interceptor';

import './field';
import './view';
import './actions';

VueOioProvider(
  {
    http: {
      url: location.origin,
      callback: interceptor
    },
    browser: {
      title: 'Oinone - 构你想象!',
      favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico'
    },
    router: [{ path: '/login', widget: 'CustomLogin'}] // 用CustomLogin覆盖默认登录页
  },
  []
);
  1. 定义CustomLogin, 定义方式同书籍中的自定义表单和自定义表格类似,精简版的代码为:
import { RouterWidget, SPI } from "@kunlun/dependencies";

@SPI.ClassFactory(RouterWidget.Token({ widget: 'CustomLogin' })) // SPI注册,router得widget和此处的widgetshi对应的
export class CustomLogin extends RouterWidget {
  public initialize(props) {
    super.initialize(props);
    this.setComponent('定义的vue文件');
    return this;
  }
}

增加新的访问路径

同覆盖登录页

  1. router中增加路由
    router: [{ path: '/login', widget: 'CustomLogin'}, { path: '/help', widget: 'Help'}]
  2. 定义Help,同覆盖登录页

定义个性化路径

需要再所有访问路径前统一加标识,比如添加Oinone;
项目目录下新建.env文件(若存在,可以复用),在env文件中添加:

BASE_PATH=/Oinone

修改后重启工程即可,访问/Oinone/login即可

结语

以上就是Oinone平台路由的扩展能力,在Oinone平台中,通过自定义Router达到扩展路由的能力,并通过采用env等通用配置的能力,解决批量修改路由的目的。

Oinone社区 作者:oinone原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/14.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
oinone的头像oinone
上一篇 2023年6月20日 下午4:07
下一篇 2023年11月2日 下午1:58

相关推荐

  • 文件上传组件前端校验超128长度大小,不清楚怎么配置

    原因是拼上后端返回的文件全路径后超出了字段的存储长度,后端通过注解@Field.String(size=1024)修改字段的存储长度后重新运行一遍服务。

    2023年11月1日
    29900
  • 自定义字段组件如何处理vue组件内的表单校验

    介绍 本示例以字符串字段为业务场景,将输入框用element-plus的组件实现了一遍,vue组件内在onMounted生命周期内将ElForm表单实例通过ts组件内提供到props的setFormInstance方法设置到了ts组件的属性formInstance上,这样就可以在ts组件校验方法validator()触发的时候直接调用表单组件实例formIn…

    2024年9月6日
    61300
  • 如果让表单支持单选 ?

    本文将介绍在代码和XML配置中的修改,支持表格的单选功能。 先自定义一个widget,继承平台默认的table @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'MyRadioTable' }) ) export class My…

    2023年11月27日
    21700
  • 如何增加页面消息通知轮询的间隔或者关闭轮询

    场景 oinone的前端页面默认自带了消息通知功能,在顶部状态栏可以看到消息的查看入口,默认每隔5秒查询一次最新的消息,我们可以通过自定义消息组件增加该间隔或者是关闭轮询 示例代码 修改轮询间隔 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies&#03…

    2024年8月20日
    38000
  • 【前端】移动端工程结构最佳实践(v4/v5)

    阅读之前 你应该: 了解node与npm相关内容 了解lerna包管理工具的相关内容 官方文档 了解git仓库的相关内容 了解rollup的相关内容 工程结构包示例 Vue项目结构包下载-v4.7.xVue项目结构包下载-v5.2.x 工程结构详解 工程结构 ├── packages │   ├── kunlun-mobile-boot │   │   ├─…

    前端 2023年11月1日
    32600

发表回复

登录后才能评论