ag-grid-vue documentation from ag-grid website清楚地说:
您可以在网格中提供Vue Router链接,但是您需要确保为正在创建的网格组件提供路由器。
示例代码:
// create a new VueRouter, or make the "root" Router available
import VueRouter from "vue-router";
const router = new VueRouter();
// pass a valid Router object to the Vue grid components to be used within the grid
components: {
'ag-grid-vue': AgGridVue,
'link-component': {
router,
template: '<router-link to="/master-detail">Jump to Master/Detail</router-link>'
}
},
// You can now use Vue Router links within you Vue Components within the Grid
{
headerName: "Link Example",
cellRendererFramework: 'link-component',
width: 200
}
这里缺少的是如何使“根”路由器可用。我一直在研究各种来源,看到很多人都有同样的问题,但都没有得到明确的答案。
https://github.com/ag-grid/ag-grid-vue/issues/1
https://github.com/ag-grid/ag-grid-vue/issues/23
https://github.com/ag-grid/ag-grid-vue-example/issues/3
https://forum.vuejs.org/t/vue-cant-find-a-simple-inline-component-in-ag-grid-vue/21788/10
ag-grid-vue是否仍然可以与vue-router一起使用,那么这个过时的文档怎么样?有些人声称它对他们有用,所以我认为它在某一点上起作用。
我此刻并不是在寻找很酷的答案。我只想知道是否有可能。我尝试使用window或created()传递路由器,到目前为止没有工作。
谢谢!
@thirtydot提出的方法效果很好。唯一的缺点是用户无法右键单击,但我发现你只能定义href链接。因此,当您单击鼠标左键时,事件侦听器会使用路由器。右键单击并在新选项卡中打开时,浏览器将使用href链接。
您仍然需要使用根路由器。下面的代码示例假设您在vue-router-aware Vue组件中有代码消耗ag-grid,因此。$ router指向根路由器。
{
headerName: 'ID',
field: 'id',
cellRenderer: (params) => {
const route = {
name: "route-name",
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;
}
}