feat(omi-router): fix redirection issue, support base path setting

README.CN.md

@@ -6,6 +6,7 @@
 - 📶 信号 **Signal** 驱动的响应式编程
 - ⚡ **微小的**尺寸，**极速的**性能
 - 🎉 [官方 OMIU 源码](https://github.com/Tencent/omi/tree/master/packages/omiu) 进行中.. & [OMIU 预览](https://omi.cdn-go.cn/omiu/latest/)
+- 🐲 [OMI Form](https://omi.cdn-go.cn/form/latest/docs/) & [OMI Form 游乐场](https://omi.cdn-go.cn/form/latest/play/)
 - 🌐 你要的一切都有: **Web Components**, **JSX**, Router, Suspense, Directive, Tailwindcss...
 - 💯 面向对象编程(OOP) 和 数据驱动编程(DOP) 两种范式都支持
 - 💒 使用 **Constructable Stylesheets** 轻松管理和共享样式

README.md

@@ -5,6 +5,7 @@ English | [简体中文](./README.CN.md)
 
 - 📶 **Signal**-driven reactive programming
 - 🎉 [OMIU Preview](https://omi.cdn-go.cn/omiu/latest/) in progress & [OMIU Source Code](https://github.com/Tencent/omi/tree/master/packages/omiu)
+- 🐲 [OMI Form](https://omi.cdn-go.cn/form/latest/docs/) & [OMI Form Playground](https://omi.cdn-go.cn/form/latest/play/)
 - ⚡ **Tiny** size, **Fast** performance
 - 🌐 Everything you need: **Web Components**, **JSX**, Router, Suspense, Directive, Tailwindcss...
 - 💯 Both **object** oriented programming(OOP) and **data** oriented programming(DOP) are supported

packages/omi-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi-router",
-  "version": "4.1.5",
+  "version": "4.1.6",
   "description": "Router for Omi",
   "main": "dist/index.es.js",
   "exports": {

packages/omi-router/src/router-view.tsx

@@ -19,6 +19,7 @@ export interface Route {
 
 interface Props {
   routes: Route[];
+  base?: string;
 }
 
 @tag('router-view')
@@ -32,12 +33,14 @@ export class RouterView extends Component<Props> {
   params: Record<string, unknown> = {}
   query: Record<string, unknown> = {}
   hash: string = ''
+  base: string = ''
 
   install() {
     // 修改组件内部的 this.router 为当前 router-view 的实例
     mixin({
       router: this
     })
+    this.base = this.props.base || ''
 
     this.routes = this.props.routes.map(route => {
       const keys: Key[] = []
@@ -104,9 +107,13 @@ export class RouterView extends Component<Props> {
     for (const route of this.routes) {
       const match = route.regex?.exec(path)
       if (match) {
-        if(route.redirect) {
-          const newPath = this.isHashMode ? `#${route.redirect}` : route.redirect;
-          window.location.href = window.location.origin + newPath;
+        if (route.redirect) {
+          if( this.isHashMode) {
+            window.location.hash = route.redirect
+          } else {
+            const newPath = this.base + route.redirect;
+            window.location.href = window.location.origin + newPath;
+          }
           return;
         }
         if (route.beforeEnter) {

packages/omi-router/src/router.tsx

@@ -8,14 +8,15 @@ type CSSItem = CSSStyleSheet | Module | string
 export class Router {
   el: RouterView
 
-  constructor(options: { routes: Route[]; renderTo: string, css?: CSSItem[] }) {
+  constructor(options: { routes: Route[]; renderTo: string, css?: CSSItem[], base?: string }) {
     this.el = render((
       <router-view
         onInstall={(evt: CustomEvent) => {
           // @ts-ignore
           evt.detail.constructor.css = options.css
         }}
         routes={options.routes}
+        base={options.base}
       />
     ), options.renderTo)
   }

packages/omi/README.md

@@ -3,6 +3,7 @@
 
 - 📶 **Signal**-driven reactive programming
 - 🎉 [OMIU Preview](https://omi.cdn-go.cn/omiu/latest/) in progress & [OMIU Source Code](https://github.com/Tencent/omi/tree/master/packages/omiu)
+- 🐲 [OMI Form](https://omi.cdn-go.cn/form/latest/docs/) & [OMI Form Playground](https://omi.cdn-go.cn/form/latest/play/)
 - ⚡ **Tiny** size, **Fast** performance
 - 🌐 Everything you need: **Web Components**, **JSX**, Router, Suspense, Directive, Tailwindcss...
 - 💯 Both **object** oriented programming(OOP) and **data** oriented programming(DOP) are supported