Flutter go_router如何移除路由栈中的指定路由？

核心思路是：获取当前完整路由栈，过滤掉目标页面（B）的条目，再将路由栈重置为过滤后的新栈，同时保持当前页面（D）处于栈顶位置。以下是主流路由框架的具体实现方式：

React Navigation（React Native 场景） #

适用于 React Navigation 6.x 及以上版本：

import { useNavigation } from '@react-navigation/native';

const DScreen = () => {
  const navigation = useNavigation();

  const removeRouteB = () => {
    // 获取当前路由栈的所有条目
    const currentRoutes = navigation.getState().routes;
    // 过滤掉名称为'B'的路由项（需与B页面注册时的name一致）
    const newRoutes = currentRoutes.filter(route => route.name !== 'B');
    // 重置路由栈，设置当前索引为D页面在新栈中的位置
    navigation.reset({
      index: newRoutes.findIndex(route => route.name === 'D'),
      routes: newRoutes,
    });
  };

  return (
    // 示例：点击按钮触发移除操作
    <Button title="移除路由B" onPress={removeRouteB} />
  );
};

执行后路由栈变为 A -> C -> D，从D页面返回将直接回到C，再返回回到A，完全跳过B。

Vue Router（Vue 3 + Vue Router 4 场景） #

import { useRouter } from 'vue-router';

const DPage = {
  setup() {
    const router = useRouter();

    const removeRouteB = () => {
      // 获取当前history栈的条目数组
      const currentEntries = router.options.history.state.entries;
      // 过滤掉名称为'B'的路由记录（需与B路由配置的name一致）
      const newEntries = currentEntries.filter(entry => entry.name !== 'B');
      // 替换history状态，更新栈内容与当前索引
      router.options.history.replaceState({
        ...router.options.history.state,
        entries: newEntries,
        index: newEntries.length - 1
      });
      // 同步路由视图更新
      router.replace(router.currentRoute.value.fullPath);
    };

    return { removeRouteB };
  },
  template: `<button @click="removeRouteB">移除路由B</button>`
};

React Router（Web 场景，React Router 6.x 及以上） #

import { useNavigate, useLocation } from 'react-router-dom';

const DPage = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const removeRouteB = () => {
    // 从浏览器history中获取当前栈条目
    const historyEntries = window.history.state?.entries || [];
    // 过滤掉B页面对应的路径（假设B页面路径为'/b'）
    const newEntries = historyEntries.filter(entry => entry.pathname !== '/b');
    // 替换浏览器history状态
    window.history.replaceState({
      ...window.history.state,
      entries: newEntries,
      index: newEntries.length - 1
    }, '', location.pathname);
    // 触发路由重渲染，同步视图
    navigate(0);
  };

  return <button onClick={removeRouteB}>移除路由B</button>;
};

内容的提问来源于stack exchange，提问作者Zhuoyuan.Li