Flutter Web使用VRouter路由跳转后页面自动消失无法回退问题

问题原因 #

1. 子页面嵌套了独立的MaterialApp
EmployeeListPage中单独返回了一个新的MaterialApp实例，VRouter的路由状态是依附于顶层应用的上下文存在的，子页面的独立MaterialApp会生成新的上下文，不持有原有VRouter的路由栈信息，页面渲染完成后新的MaterialApp会接管导航逻辑，导致原有路由栈异常，触发页面闪现后消失。
2. 路由守卫的异步校验逻辑触发重定向
   你配置的tagVGuard的beforeEnter校验是异步执行的，路由匹配时会先渲染目标页面，等异步的getUserType返回结果后，如果返回值不等于tag，就会触发重定向回到/，也会表现为页面短暂显示后消失。

解决方案 #

1. 移除子页面中嵌套的MaterialApp，子页面直接返回Scaffold即可，修改后的EmployeeListPage代码如下：

class EmployeeListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar("EmployeeListPage"),
      body: Body(),
    );
  }
}

2. 优化路由守卫的校验逻辑

• 提前预加载用户身份信息存储在本地缓存或者内存中，路由守卫校验时优先读取缓存，避免异步等待导致的页面闪现
• 可以给VRouter增加全局初始加载页，在应用启动时先完成用户身份校验，再进入对应页面，避免路由跳转过程中触发重定向
• 排查UserController.getUserType()的返回值是否符合预期，确认跳转时用户身份是否满足tag的校验要求

内容的提问来源于stack exchange，提问作者Akshat Tamrakar