用 omi-router 为 Omi 单页应用实现路由

用 omi-router 为 Omi 单页应用实现路由

【免费下载链接】omiWeb Components Framework - Web组件框架项目地址: https://gitcode.com/gh_mirrors/om/omi

omi-router 是 Omi 框架配套的路由组件，用「一张路由表 + 一个 Router 实例」的模型处理单页应用里的页面切换、动态参数与访问控制。适合想把多页面站点改造成 SPA 的 Omi 开发者。

一张路由表和一个实例就够了

整个路由体系由两部分构成。第一部分是 routes 数组：每条路由有一个 path 和一个 render 函数，地址命中时把 render 返回的内容显示在页面上，render 还能拿到当前 router 实例，方便在页面里读取路由信息。第二部分是 Router 实例，把路由表和渲染容器传进去即可。

export const routes = [ { path: '/', render() { return <h2>首页</h2> } }, { path: '/about', render() { return <h2>关于</h2> } }, { path: '*', render() { return <h2>页面不存在</h2> } }, // 通配兜底 ]

import { Router } from 'omi-router' import { routes } from './routes' new Router({ routes, renderTo: 'body', // 渲染目标容器 hash: true, // true 为 #/about 形式地址，false 为 History 模式 })

几个容易踩的点：hash 不显式传 false 时默认是 hash 模式，地址形如 #/about，想要干净地址就要显式关闭；'*' 路由是兜底项，前面都没匹配上就渲染它；构造器还支持 base 和 css 参数，分别用于子路径部署和全局样式。

导航怎么写，最小示例怎么跑

导航有两种等价写法。第一种是普通 链接，hash 模式下写成 #/about，路由库会自动接管点击，换页不刷新；第二种是编程式调用，router 上暴露了 push、replace、go、back、forward，浏览器前进后退按钮同样有效，不需要自己处理 popstate。

最小示例运行步骤

git clone https://gitcode.com/gh_mirrors/om/omi cd omi/packages/omi-router/examples/simple && npm i && npm run dev

simple 示例只有两个页面加一个 404，适合先弄懂路由表怎么工作；advanced 示例则包含参数化路由、数据请求和导航拦截，可以对着改。

动态参数与查询串怎么取

参数直接写在路径里，比如 /user/:id/profile。地址命中后，路由库把参数放进 params 对象，在 render 里读 router.params.id 就拿到用户 ID；?a=1 这类查询串由 URLSearchParams 解析后挂在 router.query 上，不用自己拆字符串。配合 router.currentRoute 里的当前路由信息，大多数动态页面需要的状态都有了。

拦截与重定向：beforeEach 导航控制

登录校验这类需求用全局守卫 beforeEach 处理：回调收到 to 和 from 两个对象，用返回值决定后续行为——返回 false 取消本次导航，返回字符串则改道到该路由，返回其他值则放行。路由条目上还可以定义 beforeEnter，返回 false 时该页永远进不去。

const router = new Router({ routes, renderTo: 'body' }) router.beforeEach((to) => { if (to.path === '/admin' && !logged) return '/login' // 未登录则重定向 })

注意 beforeEach 是实例方法，要在 new Router 之后调用，它不是构造器的选项。

加上懒加载与页面过渡

页面较重时搭配 omi-suspense：安装后在 render 里返回 o-suspense 组件，imports 属性声明要按需加载的模块，data 属性声明要预取的接口数据，pending 和 fallback 两个插槽分别处理加载中和失败两种状态。这样路由切换先完成，模块和数据在后台拉取，页面不会卡住。

想给换页加淡入淡出效果，可再配合 omi-transition，其生命周期如下图所示：Enter 阶段元素从 o-enter-from 过渡到 o-enter-to，Leave 阶段反向进行，每个状态都有对应类名供 CSS 挂接。

路由的类型定义里还预留了 transition 字段，声明页面转场时可一并配置。

你能用它做到什么，下一步做什么

一张路由表可以撑起：多页切换、参数化详情页、登录拦截、页面级代码分割与数据预取。更完整的写法可以参考仓库里 omi-router 下的 simple 与 advanced 两个示例目录，omi-starter-spa 模板也采用了这套路由方案，页面结构可直接借鉴。

建议的顺序是：先跑通 simple 示例并改动路由表里的 path；再给某条路由加 beforeEnter，观察拦截效果；最后挑一个真实页面接入 omi-suspense，把加载态和错误态都跑一遍。

【免费下载链接】omiWeb Components Framework - Web组件框架项目地址: https://gitcode.com/gh_mirrors/om/omi