使用 Vue Router 增强数据表-PHP中文网问答

我正在尝试向 DataTable 中的行添加链接/按钮，单击后会将您带到 vue 路线。当然，我可以简单地添加一个普通的链接，其中包含 href="/item/${id}"。但这会绕过路由器并导致整个页面重新加载

我想出了两个解决方案，这两个解决方案都依赖于设置 onclick 来执行一些代码：

在route1中，我将一个名为vueRoute的函数附加到window对象，该函数只是对vue方法route1的引用。现在可以从任何地方调用此函数
在 route2 中，我让 onclick 触发 CustomEvent，并且我设置了一个事件侦听器以由 route2 vue 方法处理它

我对这两种解决方案都不满意。尽管它们有效，但它们看起来很“hacky”。我应该做什么？

// datatables column definitions
columns: [
  // route1
  {
      data: 'id',
      render: function (dt) {
          return `route1`;
      },
  },
  // route2
  {
    data: 'id',
    render: function (dt) {
        return `route2`;
    },
  },
],

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

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

// on mount, set up route1 and route2
mounted() {
  window.vueRoute = this.route1;

  document.body.addEventListener('clickedEdit', this.route2);
},

可以在此处找到工作示例：https://stackblitz.com/edit/datatables-net-vue3-simple-mgdhf1?file=src/components/ListView.vue

编辑：我实际上最终做的是切换到无头表组件（TanStack），它在 Vue 中运行得比 DataTables 更好。但如果您需要使用 DataTables，@Damzaky 和 @Moritz Ringler 下面发布的解决方案可以正常工作