CXJS路由跳转确认及阻止组件卸载技术咨询

嘿，我来帮你搞定这两个CXJS路由相关的问题，之前在项目里刚好处理过类似场景，给你些实用的解决方案：

在CXJS里，要获取离开当前路由时的目标URL，核心是利用导航前置钩子来拦截跳转动作，拿到目标路由信息。这里有两种常用方式：

• 全局应用级拦截：
  直接在App组件上配置onNavigate钩子，它会在每次路由跳转前触发，能轻松拿到目标URL：

  import { App } from 'cx/widgets';
  
  <App
    onNavigate={(e, { to }) => {
      // to对象里包含目标路由的路径、参数等信息
      const targetUrl = to.pathname;
      // 这里可以加你需要的确认逻辑，比如弹窗询问
      if (window.confirm(`确定要跳转到 ${targetUrl} 吗？`)) {
        return true; // 允许跳转
      } else {
        e.preventDefault(); // 阻止跳转
        return false;
      }
    }}
  >
    {/* 你的路由和页面内容 */}
  </App>
  

• 特定页面局部拦截：
  如果只需要在某个页面处理离开确认，就在该页面的控制器里监听路由跳转事件：

  import { Controller } from 'cx/ui';
  
  class MyPageController extends Controller {
    onInit() {
      // 监听路由跳转事件
      this.addListener(this.$router.on('navigate', (e) => {
        const targetUrl = e.to.pathname;
        // 自定义确认逻辑
        if (!window.confirm(`要离开当前页面跳转到 ${targetUrl} 吗？`)) {
          e.preventDefault();
        }
      }));
    }
  }
  

你说控制器的onDestroy不起作用，这点很正常——因为onDestroy是在组件已经开始卸载流程后才触发的，这时候已经没法阻止卸载了！要实现“确认后再允许离开”，必须在路由跳转的前置阶段拦截。

针对标准仪表盘的场景（左侧菜单切换page），给你两个可行方案：

方案一：给左侧菜单项加点击拦截 #

如果菜单是手动写的MenuItem组件，可以直接在点击事件里先阻止默认跳转，确认后再手动导航：

import { Menu, MenuItem } from 'cx/widgets';

<Menu>
  <MenuItem
    href="/dashboard"
    onClick={(e) => {
      e.preventDefault(); // 先阻止默认路由跳转
      // 弹出确认框
      if (window.confirm('当前页面内容未保存，确定要离开吗？')) {
        this.$router.navigate('/dashboard'); // 用户确认后再跳转
      }
    }}
  >
    Dashboard
  </MenuItem>
  {/* 其他菜单项同理 */}
</Menu>

方案二：页面控制器内监听路由离开 #

如果菜单是基于路由配置自动生成的，没法给每个菜单项加点击事件，就在需要保护的页面控制器里监听路由跳转：

class ProtectedContentController extends Controller {
  onInit() {
    // 订阅路由跳转事件
    this.unsubscribe = this.$router.on('navigate', (e) => {
      const currentPath = this.$route.pathname;
      // 判断是否是离开当前页面的跳转
      if (e.from.pathname === currentPath && e.to.pathname !== currentPath) {
        if (!window.confirm('确定要离开当前页面吗？')) {
          e.preventDefault(); // 阻止跳转，也就不会卸载当前组件了
        }
      }
    });
  }

  onDestroy() {
    // 销毁时取消订阅，避免内存泄漏
    this.unsubscribe();
    super.onDestroy();
  }
}

记住，onDestroy是组件生命周期的“收尾阶段”，只能用来做清理工作，没法阻止组件卸载。必须在路由跳转还没发生时就拦截，才能保住你的内容组件～

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