如何在SPA中通过外部JS控制Yew路由及实现跨语言通信？

一、外部JavaScript修改Yew路由的惯用方式 #

核心思路是让Yew自身的路由系统处理跳转，避免JS直接修改window.location.href触发页面重载。具体实现步骤如下：

1. 在Yew中暴露路由控制函数
   使用wasm-bindgen将Yew的Navigator操作逻辑暴露到全局JS环境，同时在Yew组件初始化时保存Navigator实例供后续调用：

   use wasm_bindgen::prelude::*;
   use yew::prelude::*;
   use yew_router::prelude::*;
   use lazy_static::lazy_static;
   use std::sync::Mutex;
   
   // 全局存储Navigator实例
   lazy_static! {
       static ref NAVIGATOR: Mutex<Option<Navigator>> = Mutex::new(None);
   }
   
   #[function_component(App)]
   pub fn app() -> Html {
       let navigator = use_navigator().unwrap();
       *NAVIGATOR.lock().unwrap() = Some(navigator.clone());
   
       html! {
           <BrowserRouter>
               {/* 你的路由组件定义 */}
           </BrowserRouter>
       }
   }
   
   // 暴露给JS的路由跳转函数
   #[wasm_bindgen(js_name = setYewRoute)]
   pub fn set_yew_route(path: &str) {
       if let Some(navigator) = NAVIGATOR.lock().unwrap().as_ref() {
           navigator.push(path);
       }
   }
   

2. 外部JS调用暴露的函数
   在JS代码中直接调用全局的setYewRoute函数，传递目标路由路径即可完成无重载跳转：

   // 示例：点击按钮跳转到/about路由
   document.getElementById("jump-btn").addEventListener("click", () => {
       window.setYewRoute("/about");
   });
   

二、Yew与外部JS通信的方案（替代Elm Ports） #

Yew没有官方的"Ports"机制，但有几种简单高效的替代方案，完全满足JS与Yew SPA的双向通信需求：

1. wasm-bindgen直接暴露/调用函数 #

这是最常用的方式，和上面的路由示例逻辑一致：

• Yew通过#[wasm_bindgen]标记函数，直接暴露到JS全局环境
• JS可以直接调用这些函数传递数据
• 反过来，Yew也可以通过wasm-bindgen调用JS的全局函数

2. 利用CustomEvent传递消息 #

如果不想暴露过多全局函数，可使用浏览器原生的CustomEvent机制实现解耦通信：

• Yew端监听事件：

  use web_sys::CustomEvent;
  use yew::prelude::*;
  use wasm_bindgen::JsCast;
  
  #[function_component(App)]
  pub fn app() -> Html {
      let navigator = use_navigator().unwrap();
  
      // 监听自定义路由变更事件
      use_effect_with_deps(move |_| {
          let callback = Callback::from(move |event: CustomEvent| {
              let path = event.detail().as_string().unwrap_or_default();
              navigator.push(&path);
          });
  
          let event_listener = Closure::wrap(Box::new(callback) as Box<dyn FnMut(CustomEvent)>);
          web_sys::window().unwrap()
              .add_event_listener_with_callback("yew-route-change", event_listener.as_ref().unchecked_ref())
              .unwrap();
  
          // 组件销毁时移除监听
          move || {
              web_sys::window().unwrap()
                  .remove_event_listener_with_callback("yew-route-change", event_listener.as_ref().unchecked_ref())
                  .unwrap();
              event_listener.forget();
          }
      }, navigator);
  
      html! {/* 组件内容 */}
  }
  

• JS端触发事件：

  function triggerYewRoute(path) {
      const event = new CustomEvent("yew-route-change", { detail: path });
      window.dispatchEvent(event);
  }
  
  // 使用示例
  triggerYewRoute("/contact");
  

3. 共享全局变量（适合简单场景） #

如果只是传递少量简单数据，可以直接在window对象上定义变量，Yew通过wasm-bindgen读取。这种方式实现成本极低，但耦合度较高，仅适合快速原型开发。

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