问题描述
在Oinone平台内置路由中，默认了三种路由
/login //默认登录页
/page //默认主逻辑页
/ //根页面，会自动发起查询优先级最高的应用，并跳转在实际的业务迭代中，我们通常有以下三种需求：
- 我要覆盖默认的登录页，页面我不喜欢，登录逻辑满足不了；
- 我要在平台上加个帮助中心；
- 这个路径不符合我司规范，我要自定义加前缀
接下来，我将在Oinone平台中满足以上场景
覆盖默认路径
以登录页为例
- 在项目目录
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覆盖默认登录页
},
[]
);
- 定义
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;
}
}增加新的访问路径
同覆盖登录页
- 在
router中增加路由router: [{ path: '/login', widget: 'CustomLogin'}, { path: '/help', widget: 'Help'}] - 定义
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低代码应用平台体验
