build-plugin-ice-router

plugin-ice-router

Router for icejs.

支持约定式路由和配置式路由，如果 src/routes.[ts|js] 文件或者 build.json 里配置的 configFile 对应文件存在，则使用配置式路由，否则使用约定式路由。

Agreement router

build options

build.json:

{
  "router": {
    "ignorePaths": ["stores", "components"]
  }
}

options:

• caseSensitive: type boolean, default value false, route path generated by plugin will be case sensitive according to project directory
• ignoreRoutes: type string[], default value [], routes configurated will not be generated
• ignorePaths: type string[], default value ['components'], ignore every path include components dir

runtime options

src/app.ts:

import { runApp } from 'ice'

const appConfig = {
  router: {
    type: 'browser',
    basename: '/seller',
    modifyRoutes: (routes) => {
      return routes;
    }
  }
};

runApp(appConfig);

generate rules

基础路由

根据 src/pages 内目录结构，自动生成路由配置，如 src/pages/app/home.tsx 会生成路由 /app/home

目录结构为：

src/pages
└── About
    └── index.tsx
└── Dashboard
    ├── a.tsx
    └── b.tsx

生成路由配置如下：

[
  {
    path: '/dashboard',
    exact: true,
    component: PageDashboard
  },
  {
    path: '/home/a',
    exact: true,
    component: PageHomeA
  },
  {
    path: '/home/b',
    exact: true,
    component: PageHomeB
  }
]

嵌套路由

约定文件名为 _layout.[jsx|tsx] 时，会产生一个嵌套路由，当前目录和子目录均为子路由

目录结构为：

src/pages
└── About
    ├── _layout.tsx
    ├── a.tsx
    └── b.tsx
└── Dashboard
    └── index.tsx

生成路由配置如下：

[
  {
    path: '/about',
    exact: false,
    component: LayoutAbout,
    children: [
      {
        path: '/a',
        exact: true,
        component: PageAboutA
      },
      {
        path: '/b',
        exact: true,
        component: PageAboutB
      },
    ],
  },
  {
    path: '/dashboard',
    exact: true,
    component: PageDashboard
  }
]

动态路由

• 路径中$作为文件夹或文件名的首个字符，标识一个动态路由，如 src/pages/app/$uid.tsx 会生成路由 /app/:uid
• 路径中文件夹或文件名的首个和最后一个字符同时为$，标识一个可选的动态路由，如 src/pages/app/$uid$.tsx 会生成路由 /app/:uid?

目录结构为：

src/pages
└── repo
    ├── $pid.tsx
    └── index.tsx
└── $uid$.tsx

生成路由配置如下：

[
  {
    path: '/repo/:pid',
    exact: true,
    component: PageRepo$pid
  },
  {
    path: '/repo',
    exact: true,
    component: PageRepo
  },
  {
    path: '/:uid?',
    exact: true,
    component: Page$uid$
  }
]

Global Layout

如果 src/layouts/index.[jsx|tsx] 文件存在，则将它默认作为全局 layout

404 Routing

如果 src/pages/404.[jsx|tsx] 或者 src/pages/404/index.[jsx|tsx] 文件存在，则将它作为 404 页面

Config router

build options

build.json:

{
  "router": {
    // ...options
  }
}

options:

• configPath: type string, default src/routes.[ts|js]

runtime options

Ref: Agreement router -> runtime options

Routes config

Support infinite nesting:

// src/routes.ts
import UserLayout from '@/layouts/UserLayout';
import Home from '@/pages/Home';
import UserLogin from '@/pages/UserLogin';
import UserRegistry from '@/pages/UserRegistry';
import NotFound from '@/pages/NotFound';

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/user',
    component: UserLayout,
    children: [{
      path: '/login',
      exact: true,
      component: UserLogin
    }, {
      path: '/registry',
      component: UserRegistry
    }, {
      path: '/',
      redirect: '/user/login'
    }]
  },
  {
    component: NotFound
  }
];

export default routes;