路由

声明路由，在当前窗口中渲染匹配结果，并用链接或 UseRouter 导航。

#路由声明

用 ui.Route 声明页面，用 ui.Layout 声明共享框架。ui.Outlet 是匹配子路由的渲染位置。

func RouterExample() *ui.Element {
	return ui.Router(ui.RouterProps{
		InitialPath: "/",
		Routes: []*ui.RouteDeclaration{
			ui.Route(
				"/",
				func() *ui.Element {
					return ui.Link(ui.LinkProps{Href: "/settings"}, "Settings")
				},
			),
			ui.Route(
				"/settings",
				func() *ui.Element { return ui.Text("Settings") },
			),
		},
		Fallback: func() *ui.Element { return ui.Text("Page not found") },
	})
}

#嵌套布局

把相关路由包在 ui.Layout 里。在兄弟路由之间导航时布局保持挂载，本地状态会保留。

func NestedRouterExample() *ui.Element {
	return ui.Router(ui.RouterProps{
		Routes: []*ui.RouteDeclaration{
			ui.Layout(
				func() *ui.Element {
					return ui.View().FlexCol().Gap(12).Children(
						ui.Link(ui.LinkProps{Href: "/"}, "Home"),
						ui.Link(ui.LinkProps{Href: "/settings"}, "Settings"),
						ui.Outlet(),
					)
				},
				ui.Route(
					"/",
					func() *ui.Element { return ui.Text("Home") },
				),
				ui.Route(
					"/settings",
					func() *ui.Element { return ui.Text("Settings") },
				),
			),
		},
	})
}

#导航

ui.UseRouter() 提供 Navigate、Replace、Back 和 Forward。ui.Link 声明目标。Push 会新增历史记录；replace 会更新当前条目。

func BackButton() *ui.Element {
	router := ui.UseRouter()
	return ui.Button().Child("Back").OnClick(router.Back)
}

#路由参数

用 ui.UseParams 读取路径参数，用 ui.UseSearchParams 读取查询参数，用 ui.UseLocation 读取当前位置。在显示时读取它们，文本才会保持最新。:name 片段会捕获一个路径参数。

func ParameterRouterExample() *ui.Element {
	return ui.Router(ui.RouterProps{
		InitialPath: "/projects/quickgui?tab=history",
		Routes: []*ui.RouteDeclaration{
			ui.Route(
				"/projects/:name",
				func() *ui.Element {
					params := ui.UseParams()
					search := ui.UseSearchParams()
					return ui.View().Children(
						ui.Text(
							"Project: ",
							params()["name"],
						),
						ui.Text(
							"Tab: ",
							search()["tab"],
						),
					)
				},
			),
		},
	})
}