在ag-grid行中使用nuxt-link

Question

通过使用ag-grid表，我尝试使用cellRender将整个表行路由到正确的页面。如何使用nuxt-link来实现这个功能还不是很清楚。

Ag型网格行(单元格)应链接到的路径如下：

<nuxt-link :to="'users/' + id + '/overview' ">

现在，我根据到目前为止找到的信息创建了一个带有路由名称的cellRender。

this.columnDefs = [
  {
    headerName: "ID",
    field: "id",
    cellRenderer: params => {
      const route = {
        name: "users", // This path should redirect to <nuxt-link :to="'users/' + id + '/overview' ">
        params: { id: params.value }
      };

      const link = document.createElement("a");
      link.href = this.$router.resolve(route).href;
      link.innerText = params.value;
      link.addEventListener("click", e => {
        e.preventDefault();
        this.$router.push(route);
      });
      return link;
    }
  },
  {
    headerName: "Naam",
    field: "naam",
    checkboxSelection: true,
    sortable: true,
    headerCheckboxSelection: true
  },
  { headerName: "Type", field: "type", sortable: true },
  { headerName: "Status", field: "status", sortable: true },
  { headerName: "Laatste Contact", field: "contact", sortable: true },

];

在整个行中实现这些链接的最佳方式是什么？

提前感谢！

Answer 1

在这种情况下，我们可以像nuxt-link那样模拟HTML：

cellRenderer: (params) => {
        return `<a href="/users/${params.value}/overview">${params.value}</a>`;
      }

有了它，我们不需要关心添加历史记录到路由，“坏”的事情是，如果你改变了这条路由，你也需要在这里更新。

Answer 2

当我点击一行的时候，我可以通过编程链接到另一个页面。但参数在浏览器中的链接中仍然可见。

我做了什么：

this.gridOptions.onRowClicked = params => {
  this.$router.push({
    path: "/users/${params.data.id}/overview"
  });
};

这将在浏览器中显示以下url

users/$%7Bparams.data.id%7D/overview