在 ag-grid row 中使用 nuxt-link

Question

使用ag-grid表，我尝试使用cellRender将整个表行路由到正确的页面。目前还不清楚如何使用nuxt-link。

ag-grid 行(单元格)应链接到的路径如下：

<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"
});
};

这在浏览器中给了我以下网址

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