如何在原生JS及d3动态生成的SVG元素中调用Vue Router的push方法

你遇到的空白页问题是SVG中a标签的xlink:href使用javascript伪协议时的浏览器默认行为导致的：

• 通过javascript:前缀执行代码后，浏览器会将代码执行的返回值作为新的页面内容渲染。而$router.push方法返回的是Promise对象，转换为字符串后是[object Promise]，浏览器会直接用这段文本覆盖当前页面内容，所以出现空白页。
• 依赖全局app.__vue__访问Vue实例的方式本身不规范，属于调用Vue私有属性，生产环境打包后可能出现上下文丢失、属性被删除的问题。

不要使用a标签+javascript伪协议的实现方式，直接通过d3的事件绑定机制处理点击跳转逻辑，具体修改后的代码如下：

const node = svg
  .append("g")
  .selectAll("g")
  .data(nodes)
  .join("g")
  .call(drag(simulation));
node
  // 绑定点击事件，不需要额外创建a标签
  .on('click', (event, d) => {
    // 阻止默认事件，避免触发SVG原生跳转逻辑
    event.preventDefault();
    // 直接调用当前Vue实例的路由方法，更稳定
    this.$router.push({path: `${this.$route.path}/${d.url}`});
  })
  // 增加鼠标手势提示，优化交互体验
  .style('cursor', 'pointer')
  .append("image")
  .attr("x", -15)
  .attr("y", -15)
  .attr("height", 25)
  .attr("width", 25)
  .attr("xlink:href", (d) => d.image);

如果非要保留a标签的写法，也可以在javascript代码末尾添加void 0避免返回值覆盖页面，但该方案不推荐，仅做参考：

.attr("xlink:href", (d) => `javascript:app.__vue__.$router.push({path:'${this.$route.path}/${d.url}'});void 0;`)

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