FlutterWeb-02-接收浏览器传参

一,本文代码地址:

gitee.com/gyy_xiaobai…

二,提出问题:

例如有2个页面,pageA,pageB,那么怎么在浏览器输入地址,可以直接访问到这2个页面,并且传递一些参数:

http://localhost:52143/#/pageA?name=100

三,解决问题:

1,我们可以在App的build函数里面,加载这段代码,看下效果:
//获取浏览器地址的"#" 后面的字符串
var defaultRoute = window.defaultRouteName;
Uri route = Uri.parse(defaultRoute);
debugPrint(defaultRoute); // /loginPage?name=100
//获取route "?" 前面的字符串
debugPrint(route.path); // /loginPage
//获取route "?" 后面的字符串
debugPrint(route.queryParameters.toString()); // {name: 100}
复制代码

4.png 所以,我们可以通过

window.defaultRouteName
复制代码

获取浏览路由上的,path和queryParameters,那么就可以做一些事情了;

2,此时,浏览器上的queryParameters,我们已经可以获取到
3,那怎么跳转到对应的路由页面呢?

贴上路由文件,我们暂时有3个路由,“/”, "/noFoundPage", "/loginPage"

路由.png 在浏览器输入:

http://localhost:8008/#/loginPage

实际效果如下,是符合预期的,跳转到了对应页面

2.png 继续,在浏览器输入

http://localhost:8008/#/loginPage?name=100

实际效果如下,并没有跳转到loginPage页面,不符合预期。

3.png 4,解决问题: 实际问题出在Routers.onGenerateRoute方法中。

Routers.onGenerateRoute

修改如下:

1111.png

--到此,问题已经全部解决,可以跳转到任意界面,并携带参数--

猜你喜欢

转载自juejin.im/post/7073356511652610062