Using nuxt-link in ag-grid Row - vue.js

Question

Using the ag-grid table i'm trying to use cellRender to route an entire table row to the right page. It's a bit unclear how to to this with nuxt-link.
The path the ag-grid row(cell) should link to is the following:
<nuxt-link :to="'users/' + id + '/overview' ">
For now I created a cellRender with the route name based on the info I found so far.
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 },
];
What would be the best way to implement these kind of links for an entire row?
Thanks in advance!

Answer 1

In this case, we can just simulate the HTML as nuxt-link does:
cellRenderer: (params) => {
return `${params.value}`;
}
With the we don't need to care about adding history to the route, the "bad" thing it's if you change this route you need also to update here.

Answer 2

I was able to programmaticly link to another page while clicking a row. But the parameters are still visible in my link in the browser.
What I did:
this.gridOptions.onRowClicked = params => {
this.$router.push({
path: "/users/${params.data.id}/overview"
});
};
This gives me the following url in the browser
users/$%7Bparams.data.id%7D/overview