用 omi-router 为 Omi 单页应用实现路由【免费下载链接】omiWeb Components Framework - Web组件框架项目地址: https://gitcode.com/gh_mirrors/om/omiomi-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 devsimple 示例只有两个页面加一个 404适合先弄懂路由表怎么工作advanced 示例则包含参数化路由、数据请求和导航拦截可以对着改。动态参数与查询串怎么取参数直接写在路径里比如 /user/:id/profile。地址命中后路由库把参数放进 params 对象在 render 里读 router.params.id 就拿到用户 ID?a1 这类查询串由 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-toLeave 阶段反向进行每个状态都有对应类名供 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考