在 svelte 的传单弹出窗口中单击 url 直接指向不同的组件

Question

我正在尝试将 url 添加到传单弹出窗口中。我的想法是添加 url ，它可以将我带到 svelte 中的其他组件。基本上路由到另一个组件。

这是名为“Details”的组件中的弹出窗口

 L.marker([pos.x,pos.y],{icon: greenIcon})
      .addTo(layerGroup)
      .bindPopup("X: " + pos.x + "," + "Y: " + pos.y )
      .openPopup();

App.svelte 如下所示

<script>
    import { Router, Link, Route } from "svelte-routing";
    import Configuration from './routes/Configuration.svelte';
    import Details from './routes/Details.svelte';
    
    export let url = "";
  </script>
  
  <style>
   ..... 
</style>
  <Router url="{url}">
    <nav>
      <Link to="/">Details</Link>
      <Link to="Configuration">Configuration</Link>
    </nav>
    <div class="main">
      <Route path="/"><Details /></Route>
    <Route path="Configuration" component="{Configuration}" />
    </div>
  </Router>

如何将 url 添加到 Details.svelte 中的 bindpopup，以便在单击此 url 时将我定向到 Configuration.svelte？

Answer 1

您可以这样做，但您将失去客户端路由。

Leaflet 的弹出窗口支持 HTML inside bindPopup method

 L.marker([pos.x,pos.y],{icon: greenIcon})
      .addTo(layerGroup)
      .bindPopup(`X: ${pos.x}, Y: ${pos.y}
      <br> <a href="/configuration">Click here to go to Configuration page</a>` )
      .openPopup();

还对 bindPopup 中的消息进行了轻微修改，您可以避免使用 + 连接字符串，而是可以使用 template strings

在您的启动脚本中添加 --single

  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
  },

编辑 1：

还有另一种方法可以保留客户端路由，svelte-routing 中 DomUtil 和 navigate 的组合可以实现此目的。

  import { navigate } from "svelte-routing";


  let content = L.DomUtil.create("div", "myPopup");
  content.innerHTML = `X: ${pos.x}, Y: ${pos.y}
      <br> <a href="/configuration">Click here to go to Configuration page</a>`;

  L.marker([pos.x,pos.y],{icon: greenIcon})
      .addTo(layerGroup)
      .bindPopup(content)
      .openPopup();

   content.onclick = (e) => {
      e.preventDefault();
      navigate("/", { replace: true });
    };

在 svelte 的传单弹出窗口中单击 url 直接指向不同的组件

Direct to different component on click of url on leaflet popup in svelte

arrays

leaflet

svelte