在上一篇文章《FlutterWeb开发进出坑总结》中说到，“用静态路由的办法跳转，全局变量，单例对象丢掉，页面栈记载丢掉。”，那本文便是介绍一下页面栈记载丢掉的处理计划。

一、问题

在Flutter开发的网页运行时，浏览器改写网页后，虽然会显示改写前的页面（前提是用静态路由跳转），但这时调用Navigator.pop办法是回不到上一页的，包括点击浏览器的回退按钮也是无效的（地址栏中的url会变，页面不会变）。

二、原因

当浏览器改写时，Flutter引擎会从头启动，并加载当时页面，也便是说，改写后的Flutter内存中所有静态变量都被初始化，页面栈内之前的页面记载都未保留，只要当时的页面。就像是浏览网页时，把其间一页的网址拷出来，在新的标签页再次翻开。

三、处理计划

1. 思路

知道什么原因引起的，就针对性处理。页面栈记载丢掉，那么就代码中自己保护一套备用栈，监听页面路由，每次进入新页面时，记载当时页面的URL，当退出时，删去记载的URL，在浏览器改写栈记载失效时，帮助回退到上一页。

2.计划优缺陷

优点： 可完成回退作用无反常，调用Navigator.pop办法或点击浏览器回退按钮都支撑；

缺陷： Navigator.pushName().then的回调无法生效，由于是从头生成的上一页，所以并不会调用回调；回退后的页面中的临时数据都会消失，比方输入框内的内容，成员变量等；跳转必须用静态路由的办法，而且传参要用Uri包裹，不能用构造函数传参。

四、完成

1. Web本地存储东西—sessionStorage

sessionStorage是在html包下window中的一个存储对象，以key、value的形式进行存储
它会为已翻开的页面保护一个单独的存储区域（只要浏览器翻开，包括页面从头加载和康复）
仅为已翻开的页面存储数据，这意味着数据将一向存储到浏览器（或选项卡）封闭为止。

由于历史记载仅为当次运用的备份，不做永久记载。（为啥不用静态？由于浏览器改写会使静态变量初始化）

// 导包
import 'dart:html' as html;
// 运用办法
html.window.sessionStorage["key"] = "value"

对存储东西的封装这儿就不写到文章里了，依据完成业务情况去封装，便利调用就行。

2. 栈记载东西类RouterHistory

这是一个栈记载东西，首要作用是注册监听，增加删去记载等。

/// DB()为封装好的本地数据库
class RouterHistory {
  /// 监听浏览器改写前的回调
  static Function(html.Event event)? _beforeUnload;
  /// 监听浏览器回退时的回调
  static Function(html.Event event)? _popState;
  /// 目前页面是否被改写过
  static bool isRefresh = false;
  /// 初始化与注册监听
  static void register() {
    // 改写时回调
    _beforeUnload = (event) {
      // 本地记载,符号成"已改写"
      DB(DBKey.isRefresh).value = true;
      // 移除改写前的实例的监听
      html.window.removeEventListener('beforeunload', _beforeUnload);
      html.window.removeEventListener('popstate', _popState);
    };
    // 浏览器回退按钮回调
    _popState = (event) {
      // 页面被改写,触发备用回调
      if (isRefresh) {
        _back(R.currentContext); //R.currentContext 为当时页面的Context
      }
    };
    // 增加监听
    html.window.addEventListener('beforeunload', _beforeUnload);
    html.window.addEventListener('popstate', _popState);
    // 从本地数据库中取出"改写"符号
    isRefresh = DB(DBKey.isRefresh).get(false)
    // 复原本地库中的改写符号
    DB(DBKey.isRefresh).value = false;
  }
  static bool checkBack(currentContext) {
    // 是否能正常 pop
    if (Navigator.canPop(currentContext)) {
      return true;
    }
    // 不能则启用备用栈
    _back(currentContext);
    return false;
  }
  // 回来
  static void _back(currentContext) {
    List history = get();
    if (history.length > 1) {
      history.removeLast();
      set(history);
      //跳转至上一页并封闭当时页
      Navigator.of(currentContext).popAndPushNamed(history.last);
    }
  }
  // 增加记载
  static add(String? path) {
    if (path ` null) return;
    List history = get();
    if (history.contains(path)) return;
    history.add(path);
    set(history);
  }
  // 删去记载
  static remove(String? path) {
    if (path ` null) return;
    List history = get();
    history.remove(path);
    set(history);
  }
  // 设置备用栈数据
  static String set(List<dynamic> history) => DB(DBKey.history).value = json.encode(history);
  // 取出备用栈数据
  static get() => json.decode(DB(DBKey.history).get('[]'));
}

3. 监听Flutter路由

自定义类并完成NavigatorObserver，并将完成类放在MaterialApp中的navigatorObservers参数中。

// 完成类
class HistoryObs extends NavigatorObserver {
  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    // 存路由信息
    RouterHistory.add(route.settings.name);
  }
  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    // 删路由信息
    RouterHistory.remove(route.settings.name);
  }
}
// 设置监听
MaterialApp(
    ......
    navigatorObservers: [ HistoryObs() ],
    ......
)

4. 路由办法封装

跳转办法必须为静态路由，以确保参数和路径都能在url中，才可完成回退作用

 /// 替换 Navigator.pop ，
  static pop() {
    // 检测是否能正常回来，不能则回来FALSE
    if (RouterHistory.checkBack(currentContext)) {
      Navigator.pop(currentContext);
    }
  }
  /// 静态路由跳转
  static Future toName(String pageName, {Map<String, dynamic>? params}) {
    // 封装路径以及参数
    var uri = Uri(scheme: RoutePath.scheme, host: pageName, queryParameters: params ?? {});
    return Navigator.of(currentContext).pushNamed(uri.toString());
  }

5. 初始化位置

放在MaterialApp外层的build中，或initState中即可。

  @override
  void initState() {
    super.initState();
    RouterHistory.register();
  }
  @override
  Widget build(BuildContext context) {
    // 或 RouterHistory.register();
    return MaterialApp(
          navigatorObservers: [HistoryObs()],
    )；
  }

以上便是该计划的关键代码

五、最终

该计划仅仅能处理问题，但不是最好的处理计划。有更好的处理计划欢迎留言~

Flutter官方的Navigator 2.0 虽然能完成回退，本质上也是跳转了新页面，并形成栈内记载混乱，不能像真正的web一样，感兴趣的同学可以自行了解下Navigator 2.0。

Navigator2.0在浏览器回退按钮的处理上又与Navigator1.0不同，点击回退按钮时Navigator2.0并不是履行pop操作，而是履行setNewRoutePath操作，本质上应该是从浏览器的history中获取上一个页面的url，然后从头加载。这样的确处理了改写后回退的问题，由于改写后浏览器的history并未丢掉，但是也导致了文章中我们提到的flutter中的页面栈混乱的问题。

想了解更多关于FlutterWeb的问题在FlutterWeb开发进出坑总结