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

相关推荐

  • 如何在Oinone 根据主题实现自定义组件样式        前端

    如何在Oinone 根据主题实现自定义组件样式

    在页面交互中,样式的变化是前端核心工作之一。本文介绍如何在Oinone平台中根据主题变化自定义组件样式。 介绍 Oinone平台提供了六种不同的主题设置,浅色大主题、浅色中主题、浅色小主题、深色大主题、深色中主题、深色小主题,默认采用浅色中主题。本文旨在指导如何在线或通过代码修改这些主题,以满足个性化需求。 基础知识 Oinone平台的默认主题为浅色中主题,…

    2024年2月26日
    00
  • 【前端】低无一体部署常见问题

    如何检查上传的SDK是否有效? 1. 在任意页面刷新后,查看是否发起【查询SDK组件】的请求。 2. 在返回的js和css列表中是否能找到在界面设计器上传的js和css文件。 3. 检查浏览器的Console中是否有组件相关报错。 4. 检查sdk中是否包含了启动工程未加入的包依赖。 启动工程包依赖:main.ts VueOioProvider( { dep…

    低无一体 2023年11月1日
    00
  • 前端环境配置(v4)

    前端环境配置 前端环境配置包含.env编译时配置和RuntimeConfig运行时配置 编译时配置 .env 属性 类型 默认值 作用 BASE_PATH [String] 统一配置URL请求路径前缀 STATIC_IMG [String] 静态资源路径 RUNTIME_CONFIG_BASE_URL [String] 运行时配置文件URL请求路径前缀 RU…

    前端 2023年11月1日
    00
  • 【前端】登录页面扩展点        前端

    【前端】登录页面扩展点

    登录页面扩展点 场景 1: 登录之前需要二次确认框2: 前端默认的错误提示允许被修改3: 后端返回的错误提示允许被修改4: 登录后跳转到自定义的页面 方案 前端默认错误可枚举 errorMessages: { loginEmpty: '用户名不能为空', passwordEmpty: '密码不能为空', picCode…

    2023年11月1日
    00
  • 左树右表页面,点击表格的新建按钮,获取选中的树节点        前端

    左树右表页面,点击表格的新建按钮,获取选中的树节点

    左树右表页面,点击表格的新建按钮,获取选中的树节点 通过自定义action的方式来实现 新建一个action文件TreeActionWidget.ts import { ActionType, ActionWidget, SPI, ViewActionTarget, RouterViewActionWidget } from '@kunlun/de…

    2023年11月1日
    00

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注