用 yew-router 构建函数组件风格的多页面博客function_router 示例深度解析【免费下载链接】yewRust / Wasm framework for creating reliable and efficient web applications项目地址: https://gitcode.com/gh_mirrors/ye/yew导读本篇文章以 Yew 官方示例仓库中的 function_router 为蓝本系统讲解如何用yew-router在纯函数组件function components下实现多页面应用从路由枚举定义、BrowserRouterSwitch的路由分发到基于种子seed的确定性内容生成、查询参数驱动的分页再到通过base>#[derive(Routable, PartialEq, Eq, Clone, Debug)] pub enum Route { #[at(/posts/{id})] Post { id: u32 }, #[at(/posts)] Posts, #[at(/authors/{id})] Author { id: u32 }, #[at(/authors)] Authors, #[at(/)] Home, #[not_found] #[at(/404)] NotFound, }几个要点#[at(/...)]属性把每个枚举变体绑定到一段路径模板。{id}是路径参数会被解析成结构体字段id: u32注意这里用的是u32而同仓库的router示例用的是u64路由定义上二者皆可只要字段类型实现FromStr#[not_found]标注兜底变体NotFound当 URL 匹配不到任何路由时路由器会路由到它变体需要派生PartialEq、Clone、Debug等 trait供Switch渲染时做匹配与比较。Routable派生宏的实现位于 yew-router-macro 的 routable_derive.rs它对每个#[at]变体生成路径 → 变体的解析代码并支持{name}路径参数、查询参数与通配段。二、BrowserRouterSwitch页面分发与渲染路由定义好后需要在根组件里挂上路由器并做分发。function_router 的根组件App如下app.rs#[component] pub fn App() - Html { html! { BrowserRouter Nav / main SwitchRoute render{switch} / /main footer classfooter div classcontent has-text-centered { Powered by } a hrefhttps://yew.rs{ Yew }/a { using } a hrefhttps://bulma.io{ Bulma }/a /div /footer /BrowserRouter } }BrowserRouter基于浏览器原生 History API以常规 URL 作为路由来源并提供 location 信息与导航能力见 yew-router 的 router.rs 中BrowserRouter的文档说明SwitchRoute接收一个render函数把当前路由值映射为对应的页面组件。对应的switch函数是一个纯粹的模式匹配app.rsfn switch(routes: Route) - Html { html! { match routes { Route::Post { id } Post seed{id} /, Route::Posts PostList /, Route::Author { id } Author seed{id} /, Route::Authors AuthorList /, Route::Home Home /, Route::NotFound PageNotFound /, } } }注意这里的一个设计亮点URL 路径参数id直接被当作内容生成的种子seed传给页面组件。也就是说/posts/42这个 URL 本身就蕴含了这篇文章的内容由种子 42 确定性地生成这一语义——刷新页面、分享链接看到的永远是同一篇文章。组件间的导航LinkRoute页面之间通过yew-router的Link组件导航。例如 nav.rs 中的导航栏LinkRoute classes{classes!(navbar-item)} to{Route::Home} { Home } /LinkRoute LinkRoute classes{classes!(navbar-item)} to{Route::Posts} { Posts } /LinkRoute而文章卡片post_card.rs则展示了带参数路由的跳转方式——Route::Post { id: post.seed }直接通过枚举构造路由Link会自动序列化成/posts/{seed}的 URLLinkRoute classes{classes!(title, is-block)} to{Route::Post { id: post.seed }} { post.title } /LinkRoute LinkRoute classes{classes!(subtitle, is-block)} to{Route::Author { id: post.author.seed }} { post.author.name } /LinkRoute这种用类型安全的枚举构造链接的方式从根本上避免了手写字符串 URL 可能带来的拼写错误也是yew-router相对普通字符串路由方案的核心优势。三、任意子路径部署base>base>let basename basename.map(|m| m.to_string()).or_else(base_url);而base_url()/fetch_base_url()的实现位于 utils.rs它查询 DOM 中base[href]元素取出其href属性解析出 pathname 并去掉结尾的/根路径/则返回None。仓库中还有对应的单元测试验证了这一行为utils.rs#[test] fn test_base_url() { document().head().unwrap().set_inner_html(r##); assert_eq!(fetch_base_url(), None); document().head().unwrap().set_inner_html(r#base href/base/#); assert_eq!(fetch_base_url(), Some(/base.to_string())); document().head().unwrap().set_inner_html(r#base href/base#); assert_eq!(fetch_base_url(), Some(/base.to_string())); }因此只要构建时通过--public-url指定部署子路径base>let post use_reducer(|| PostState { inner: content::Post::generate_from_seed(seed), }); { let post_dispatcher post.dispatcher(); use_effect_with(seed, move |seed| { post_dispatcher.dispatch(*seed); || {} }); }这里的模式是首次渲染时用当前seed生成一次内容use_reducer的初始值use_effect_with(seed, ...)监听seed变化——当用户在同一组件内切换文章例如从/posts/1导航到/posts/2但Switch复用了Post组件实例时effect 重新执行通过 dispatcher 派发新的 seedReducible::reduce重新生成内容。同样的seed 变化 → reducer 重新生成模式还被用在PostCardpost_card.rs和AuthorCardauthor_card.rs中。由于生成是纯计算这套模式让URL 参数即内容的语义在客户端被完整实现没有任何网络请求。五、查询参数分页LinkRoute, Query文章列表页 pages/post_list.rs 展示了yew-router的**查询参数query**能力const ITEMS_PER_PAGE: u32 10; const TOTAL_PAGES: u32 u32::MAX / ITEMS_PER_PAGE; let location use_location().unwrap(); let current_page location.query::PageQuery().map(|it| it.page).unwrap_or(1);当前页码通过use_location()获取的Location的query::PageQuery()读取PageQuery是一个Serialize Deserialize的结构体pagination.rs#[derive(Serialize, Deserialize, PartialEq, Eq, Clone, Debug)] pub struct PageQuery { pub page: u32, }文章列表由种子范围(current_page - 1) * 10 .. current_page * 10决定分成两列渲染PostCard由于TOTAL_PAGES被定义为u32::MAX / 10这个博客实际上有接近 4.3 亿页配合种子生成机制每页内容都是实时算出来的。分页组件 pagination.rs 进一步展示了带查询参数的导航链接LinkRoute, PageQuery classes{classes!(pagination-previous)} disabled{page1} query{Some(PageQuery{page: page - 1})} to{to.clone()} { Previous } /LinkRoute, PageQueryLink组件接受第二个泛型参数Q查询参数类型query{Some(PageQuery { page: ... })}会序列化到 URL 的?pageN部分RelNavButtons在首页/末页时通过disabled禁用上一页/下一页。中间页码列表则由Links/RenderLinks组件基于LINKS_PER_SIDE 3的窗口算法生成页码过多时用省略号…折叠当前页标记is-current。六、更有趣的交互细节作者轮播ProgressDelay定时驱动内容刷新作者列表页 pages/author_list.rs 每 15 秒自动换一批作者const CAROUSEL_DELAY_MS: u32 15000; let seeds use_state(random_author_seeds); let on_complete { let seeds seeds.clone(); Callback::from(move |_| { seeds.set(random_author_seeds()); }) };进度条组件 components/progress_delay.rs 用gloo::timers::callback::Interval实现定时器每duration_ms / RESOLUTION毫秒与MIN_INTERVAL_MS 50取较小者派发一个TickactionValueState::reduce计算经过时间与进度比例到达duration_ms时触发on_complete回调并重置计时。这是一个进度条 定时回调的通用组件通过Reducible状态机管理时间推进值得在需要等待/过渡交互时复用。SSR 双入口设计这个示例同时也是 Yew SSR hydration 的演示载体。库入口 lib.rs 以pub mod形式暴露app、pages、content等模块而 app.rs 额外提供了一个ServerApp组件它用MemoryHistory构造历史记录把服务端传入的 URL 与查询参数push_with_query进去再交给通用的Router history{history}渲染——这样同一套页面组件既能在浏览器端由BrowserRouter驱动也能在服务端用MemoryRouter风格的 history 直接渲染出对应 URL 的 HTML。七、本地运行与注意事项运行该示例需要 Trunk 构建工具在examples/function_router目录下执行trunk serve --open更多相关命令与说明trunk serve --open启动开发服务器并在浏览器中打开页面README 中的标准启动方式trunk build --public-url /some/path指定部署子路径构建。构建出的index.html中base>trunk serve --release --open因为每篇文章的生成涉及大量随机采样与字符串拼接release 模式下的性能差异会非常明显。八、从示例中提炼的可复用模式综合来看function_router 示例沉淀了以下几条可以直接迁移到真实 Yew 项目的模式类型安全路由Routable枚举 LinkRoute构造导航杜绝魔法字符串路径参数直接作为组件 props 传入。URL 即状态用 URL 承载内容标识这里是种子配合use_reduceruse_effect_with(seed, ...)在参数变化时重建内容实现无请求的动态页面。确定性生成Generator种子化 RNGGeneratedtrait 把随机内容变成可复现、可缓存、可分享的资源同时注意跨平台一致性避免usize、固定 RNG 算法以支持 SSR。子路径部署base contenteditable="false">【免费下载链接】yewRust / Wasm framework for creating reliable and efficient web applications项目地址: https://gitcode.com/gh_mirrors/ye/yew创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
用 yew-router 构建函数组件风格的多页面博客function_router 示例深度解析【免费下载链接】yewRust / Wasm framework for creating reliable and efficient web applications项目地址: https://gitcode.com/gh_mirrors/ye/yew导读本篇文章以 Yew 官方示例仓库中的 function_router 为蓝本系统讲解如何用yew-router在纯函数组件function components下实现多页面应用从路由枚举定义、BrowserRouterSwitch的路由分发到基于种子seed的确定性内容生成、查询参数驱动的分页再到通过base>#[derive(Routable, PartialEq, Eq, Clone, Debug)] pub enum Route { #[at(/posts/{id})] Post { id: u32 }, #[at(/posts)] Posts, #[at(/authors/{id})] Author { id: u32 }, #[at(/authors)] Authors, #[at(/)] Home, #[not_found] #[at(/404)] NotFound, }几个要点#[at(/...)]属性把每个枚举变体绑定到一段路径模板。{id}是路径参数会被解析成结构体字段id: u32注意这里用的是u32而同仓库的router示例用的是u64路由定义上二者皆可只要字段类型实现FromStr#[not_found]标注兜底变体NotFound当 URL 匹配不到任何路由时路由器会路由到它变体需要派生PartialEq、Clone、Debug等 trait供Switch渲染时做匹配与比较。Routable派生宏的实现位于 yew-router-macro 的 routable_derive.rs它对每个#[at]变体生成路径 → 变体的解析代码并支持{name}路径参数、查询参数与通配段。二、BrowserRouterSwitch页面分发与渲染路由定义好后需要在根组件里挂上路由器并做分发。function_router 的根组件App如下app.rs#[component] pub fn App() - Html { html! { BrowserRouter Nav / main SwitchRoute render{switch} / /main footer classfooter div classcontent has-text-centered { Powered by } a hrefhttps://yew.rs{ Yew }/a { using } a hrefhttps://bulma.io{ Bulma }/a /div /footer /BrowserRouter } }BrowserRouter基于浏览器原生 History API以常规 URL 作为路由来源并提供 location 信息与导航能力见 yew-router 的 router.rs 中BrowserRouter的文档说明SwitchRoute接收一个render函数把当前路由值映射为对应的页面组件。对应的switch函数是一个纯粹的模式匹配app.rsfn switch(routes: Route) - Html { html! { match routes { Route::Post { id } Post seed{id} /, Route::Posts PostList /, Route::Author { id } Author seed{id} /, Route::Authors AuthorList /, Route::Home Home /, Route::NotFound PageNotFound /, } } }注意这里的一个设计亮点URL 路径参数id直接被当作内容生成的种子seed传给页面组件。也就是说/posts/42这个 URL 本身就蕴含了这篇文章的内容由种子 42 确定性地生成这一语义——刷新页面、分享链接看到的永远是同一篇文章。组件间的导航LinkRoute页面之间通过yew-router的Link组件导航。例如 nav.rs 中的导航栏LinkRoute classes{classes!(navbar-item)} to{Route::Home} { Home } /LinkRoute LinkRoute classes{classes!(navbar-item)} to{Route::Posts} { Posts } /LinkRoute而文章卡片post_card.rs则展示了带参数路由的跳转方式——Route::Post { id: post.seed }直接通过枚举构造路由Link会自动序列化成/posts/{seed}的 URLLinkRoute classes{classes!(title, is-block)} to{Route::Post { id: post.seed }} { post.title } /LinkRoute LinkRoute classes{classes!(subtitle, is-block)} to{Route::Author { id: post.author.seed }} { post.author.name } /LinkRoute这种用类型安全的枚举构造链接的方式从根本上避免了手写字符串 URL 可能带来的拼写错误也是yew-router相对普通字符串路由方案的核心优势。三、任意子路径部署base>base>let basename basename.map(|m| m.to_string()).or_else(base_url);而base_url()/fetch_base_url()的实现位于 utils.rs它查询 DOM 中base[href]元素取出其href属性解析出 pathname 并去掉结尾的/根路径/则返回None。仓库中还有对应的单元测试验证了这一行为utils.rs#[test] fn test_base_url() { document().head().unwrap().set_inner_html(r##); assert_eq!(fetch_base_url(), None); document().head().unwrap().set_inner_html(r#base href/base/#); assert_eq!(fetch_base_url(), Some(/base.to_string())); document().head().unwrap().set_inner_html(r#base href/base#); assert_eq!(fetch_base_url(), Some(/base.to_string())); }因此只要构建时通过--public-url指定部署子路径base>let post use_reducer(|| PostState { inner: content::Post::generate_from_seed(seed), }); { let post_dispatcher post.dispatcher(); use_effect_with(seed, move |seed| { post_dispatcher.dispatch(*seed); || {} }); }这里的模式是首次渲染时用当前seed生成一次内容use_reducer的初始值use_effect_with(seed, ...)监听seed变化——当用户在同一组件内切换文章例如从/posts/1导航到/posts/2但Switch复用了Post组件实例时effect 重新执行通过 dispatcher 派发新的 seedReducible::reduce重新生成内容。同样的seed 变化 → reducer 重新生成模式还被用在PostCardpost_card.rs和AuthorCardauthor_card.rs中。由于生成是纯计算这套模式让URL 参数即内容的语义在客户端被完整实现没有任何网络请求。五、查询参数分页LinkRoute, Query文章列表页 pages/post_list.rs 展示了yew-router的**查询参数query**能力const ITEMS_PER_PAGE: u32 10; const TOTAL_PAGES: u32 u32::MAX / ITEMS_PER_PAGE; let location use_location().unwrap(); let current_page location.query::PageQuery().map(|it| it.page).unwrap_or(1);当前页码通过use_location()获取的Location的query::PageQuery()读取PageQuery是一个Serialize Deserialize的结构体pagination.rs#[derive(Serialize, Deserialize, PartialEq, Eq, Clone, Debug)] pub struct PageQuery { pub page: u32, }文章列表由种子范围(current_page - 1) * 10 .. current_page * 10决定分成两列渲染PostCard由于TOTAL_PAGES被定义为u32::MAX / 10这个博客实际上有接近 4.3 亿页配合种子生成机制每页内容都是实时算出来的。分页组件 pagination.rs 进一步展示了带查询参数的导航链接LinkRoute, PageQuery classes{classes!(pagination-previous)} disabled{page1} query{Some(PageQuery{page: page - 1})} to{to.clone()} { Previous } /LinkRoute, PageQueryLink组件接受第二个泛型参数Q查询参数类型query{Some(PageQuery { page: ... })}会序列化到 URL 的?pageN部分RelNavButtons在首页/末页时通过disabled禁用上一页/下一页。中间页码列表则由Links/RenderLinks组件基于LINKS_PER_SIDE 3的窗口算法生成页码过多时用省略号…折叠当前页标记is-current。六、更有趣的交互细节作者轮播ProgressDelay定时驱动内容刷新作者列表页 pages/author_list.rs 每 15 秒自动换一批作者const CAROUSEL_DELAY_MS: u32 15000; let seeds use_state(random_author_seeds); let on_complete { let seeds seeds.clone(); Callback::from(move |_| { seeds.set(random_author_seeds()); }) };进度条组件 components/progress_delay.rs 用gloo::timers::callback::Interval实现定时器每duration_ms / RESOLUTION毫秒与MIN_INTERVAL_MS 50取较小者派发一个TickactionValueState::reduce计算经过时间与进度比例到达duration_ms时触发on_complete回调并重置计时。这是一个进度条 定时回调的通用组件通过Reducible状态机管理时间推进值得在需要等待/过渡交互时复用。SSR 双入口设计这个示例同时也是 Yew SSR hydration 的演示载体。库入口 lib.rs 以pub mod形式暴露app、pages、content等模块而 app.rs 额外提供了一个ServerApp组件它用MemoryHistory构造历史记录把服务端传入的 URL 与查询参数push_with_query进去再交给通用的Router history{history}渲染——这样同一套页面组件既能在浏览器端由BrowserRouter驱动也能在服务端用MemoryRouter风格的 history 直接渲染出对应 URL 的 HTML。七、本地运行与注意事项运行该示例需要 Trunk 构建工具在examples/function_router目录下执行trunk serve --open更多相关命令与说明trunk serve --open启动开发服务器并在浏览器中打开页面README 中的标准启动方式trunk build --public-url /some/path指定部署子路径构建。构建出的index.html中base>trunk serve --release --open因为每篇文章的生成涉及大量随机采样与字符串拼接release 模式下的性能差异会非常明显。八、从示例中提炼的可复用模式综合来看function_router 示例沉淀了以下几条可以直接迁移到真实 Yew 项目的模式类型安全路由Routable枚举 LinkRoute构造导航杜绝魔法字符串路径参数直接作为组件 props 传入。URL 即状态用 URL 承载内容标识这里是种子配合use_reduceruse_effect_with(seed, ...)在参数变化时重建内容实现无请求的动态页面。确定性生成Generator种子化 RNGGeneratedtrait 把随机内容变成可复现、可缓存、可分享的资源同时注意跨平台一致性避免usize、固定 RNG 算法以支持 SSR。子路径部署base contenteditable="false">【免费下载链接】yewRust / Wasm framework for creating reliable and efficient web applications项目地址: https://gitcode.com/gh_mirrors/ye/yew创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
