如何在DataTables中通过Vue Router实现无刷新路由跳转？

我需要给DataTables的表格行添加链接或按钮，点击后通过Vue Router跳转页面。直接使用带href的<a>标签会绕过Vue Router导致页面重载，之前尝试了两种基于onclick的方案，但都不够优雅：

1. 将Vue的路由方法挂载到window对象供全局调用
2. 通过onclick触发自定义事件，再由Vue方法监听处理

原实现代码如下：

DataTables列定义 #

columns: [
  // 方案1：全局挂载方法调用
  {
      data: 'id',
      render: function (dt) {
          return `<a href="#" onclick="(function(){vueRoute('${dt}');})()">route1</a>`;
      },
  },
  // 方案2：自定义事件触发
  {
    data: 'id',
    render: function (dt) {
        return `<a href="#" onclick="(function(){document.body.dispatchEvent(
          new CustomEvent('clickedEdit', {detail : ${dt} }));})() ">route2</a>`;
    },
  },
],

Vue组件方法与挂载逻辑 #

methods: {
  route1(id) {
    this.$router.push('/item/' + id);
  },

  route2(evt) {
    this.$router.push('/item/' + evt.detail);
  },
},

mounted() {
  window.vueRoute = this.route1;
  document.body.addEventListener('clickedEdit', this.route2);
},

更优雅的替代方案 #

方案1：利用DataTables原生事件监听（推荐） #

无需在渲染时嵌入onclick逻辑，给跳转元素添加类名和数据属性，然后通过DataTables的事件监听统一处理路由跳转：

// DataTables列定义
columns: [
  {
    data: 'id',
    render: function (dt) {
      return `<a href="#" class="dt-router-link" data-item-id="${dt}">查看详情</a>`;
    },
  },
],

// Vue组件mounted钩子内
mounted() {
  const table = $('#your-table-id').DataTable();
  // 监听表格内跳转链接的点击事件
  table.on('click', '.dt-router-link', (event) => {
    event.preventDefault(); // 阻止默认跳转行为
    const itemId = event.currentTarget.dataset.itemId;
    this.$router.push(`/item/${itemId}`);
  });
}

这种方式将DOM操作与Vue路由逻辑解耦，避免全局污染，更符合Vue组件化的设计思想。

方案2：封装Vue自定义指令 #

通过自定义指令绑定路由跳转逻辑，需要注意DataTables动态渲染DOM后指令的生效问题：

// 全局注册自定义指令
const app = createApp(App);
app.directive('dt-router', {
  inserted(el, binding) {
    el.addEventListener('click', (e) => {
      e.preventDefault();
      const { router, id } = binding.value;
      router.push(`/item/${id}`);
    });
  }
});

// DataTables列定义（需确保render函数能访问到Vue实例的$router）
columns: [
  {
    data: 'id',
    render: function (dt) {
      return `<a href="#" v-dt-router="{router: ${this.$router}, id: ${dt}}">查看详情</a>`;
    },
  },
],

此方案适合需要复用路由跳转逻辑的场景，但需处理好DataTables渲染时的上下文问题。

最终选择 #

我最终改用了TanStack无头表格组件，它与Vue的兼容性更好；若需继续使用DataTables，上述两种方案或社区提供的方案均可行。

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