1 个不稳定版本
0.8.0 | 2020年1月1日 |
---|
#12 在 #yew-router 中
59KB
1.5K SLoC
此项目已迁移
此项目已合并到 Yew 仓库中,具体可在此处找到:此处。您应在此处处理所有问题或改进,而不是在此处。此仓库将在不久的将来归档。
yew-router
Yew前端框架的路线库。
示例
#[derive(Switch, Debug)]
pub enum AppRoute {
#[to = "/profile/{id}"]
Profile(u32),
#[to = "/forum{*:rest}"]
Forum(ForumRoute),
#[to = "/"]
Index,
}
#[derive(Switch, Debug)]
pub enum ForumRoute {
#[to = "/{subforum}/{thread_slug}"]
SubForumAndThread{subforum: String, thread_slug: String}
#[to = "/{subforum}"]
SubForum{subforum: String}
}
html! {
<Router<AppRoute, ()>
render = Router::render(|switch: AppRoute| {
match switch {
AppRoute::Profile(id) => html!{<ProfileComponent id = id/>},
AppRoute::Index => html!{<IndexComponent/>},
AppRoute::Forum(forum_route) => html!{<ForumComponent route = forum_route/>},
}
})
/>
}
工作原理
此库通过从浏览器获取URL位置,并使用它来实例化一个实现Switch类型的对象。仅使用 <a></a>
标签来导航到您的路由将不会按预期工作,并且效率低下,因为服务器最多会再次返回整个应用程序包,如果服务器未正确配置,最坏的情况是返回404消息。使用此库的RouteService、RouteAgent、RouterButton和RouterLink通过 history.push_state()
来设置位置,将不会重新检索整个应用程序来更改路由。
服务器配置
为了使指向您的web应用程序的外部链接正常工作,服务器必须配置为对于任何原本会返回404(对于任何可想象客户端路由)的GET请求返回 index.html
文件。不能是一个重定向到 index.html
的 3xx
,因为这会改变浏览器的URL,导致路由失败 - 它必须是一个包含 index.html
内容的 200
响应。一旦加载了 index.html
的内容,它将依次加载您的其他资产,您的应用程序将开始运行,路由器将检测当前路由,并相应地设置您的应用程序状态。
如果您选择在同一个服务器上提供应用程序和API,建议将API挂载到/api
,将资源挂载到/
,并让/
返回index.html
的内容。
有关如何配置webpack开发服务器以实现此行为的详细信息,请参阅https://webpack.js.cn/configuration/dev-server/#devserverhistoryapifallback。
如何包含
您可以通过将这些内容添加到依赖项中来使用发布版本。
[dependencies]
yew-router = "0.7.0"
yew = "0.10.1"
您可以通过将以下内容添加到依赖项中来在项目中使用开发版本
[dependencies]
yew-router = { git = "https://github.com/yewstack/yew_router", branch="master" }
yew = {git = "https://github.com/yewstack/yew", branch = "master"}
最低rustc版本
目前,此库针对rustc 1.39.0,但在最新稳定版本上进行开发。此库旨在跟踪Yew的最低支持rustc版本。
贡献/请求
如果您有任何问题、建议或想做出贡献,请创建一个Issue或PR,我们将及时回复您。
依赖项
~1MB
~19K SLoC