前置：參照【Flutter路由參數(shù)1 - 路由管理】中配置命名路由routes固阁、onGenerateRoute皂岔。
1 參數(shù)分析
分析Flutter路由傳遞參數(shù)和瀏覽器參數(shù)傳遞的區(qū)別：
| 訪問頁(yè)面方式 | RouteSettings對(duì)象區(qū)別 |
|---|---|
瀏覽器訪問：http://localhost:54227/router?page-title=test-router
|
RouteSettings("/router", {page-title: test-router}) |
Navigator路由：Navigator.pushNamed(context, TestRouterPage.routeName, arguments: {"page-title": "test-router"});
|
RouteSettings("/router?page-title=test-router", null) |
查看RouteSettings構(gòu)造方法以看出咬腕，使用瀏覽器get請(qǐng)求時(shí)谓松，會(huì)將url和參數(shù)一起拼接到name屬性中星压。
const RouteSettings({
this.name,
this.arguments,
});
2 處理思路
對(duì)于RouteSettings的name屬性，如果其包含參數(shù)鬼譬，則拆分后存儲(chǔ)到arguments中娜膘。
代碼處理如下：
class TestRouter {
static Map<String, Function> routes = {
TestRouterPage.routeName: (context) => const TestRouterPage(),
};
var onGenerateRoute = (RouteSettings settings) {
String? name = settings.name;
if (name != null) {
List<String> nameList = name.split("?");
name = nameList[0];
final Function? pageBuilder = routes[name];
if (pageBuilder != null) {
// settings.arguments不為空，直接路由
if (settings.arguments != null) {
return MaterialPageRoute(builder: (context) => pageBuilder(context), settings: settings);
}
// settings.arguments為空优质，嘗試從name中獲取url參數(shù)
return MaterialPageRoute(builder: (context) => pageBuilder(context), settings: handleArguments(nameList, settings) ?? settings);
}
}
return MaterialPageRoute(builder: (context) => WebPage(const Page404()));
};
/// Url中參數(shù)組裝覆蓋RouteSettings的參數(shù)arguments
static RouteSettings? handleArguments(List<String> nameList, RouteSettings settings) {
if (nameList.length <= 1) return null;
Map paramMap = {};
nameList[1].split("&").forEach((param) {
List paramList = param.split("=");
paramMap[paramList[0]] = paramList[1];
});
return settings.copyWith(arguments: paramMap);
}
}
