如何将 vue-router link 添加为 ag-grid-vue 列？

Question

ag-grid-vue documentation from ag-grid website 清楚地说：

You can provide Vue Router links within the Grid, but you need to ensure that you provide a Router to the Grid Component being created.

带有示例代码：

// 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
}

这里缺少的是如何使 "root" 路由器可用。我一直在调查各种来源，发现很多人都有同样的问题，但 none 得到了明确的答案。

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() 传递路由器并且 none 到目前为止有效。

谢谢！

Answer 1

@thirtydot 建议的方法效果很好。唯一的缺点是用户不能右键单击，但我发现你可以只定义 href link。因此，当您单击鼠标左键时，事件侦听器会使用路由器。当您右键单击并在新选项卡中打开时，浏览器将使用 href link.

您仍然需要使您的根路由器可用。下面的代码示例假设您在使用 ag-grid 的 vue-router-aware Vue 组件中有代码，因此 this.$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;
    }
}

如何将 vue-router link 添加为 ag-grid-vue 列？

How can I add vue-router link as ag-grid-vue column?

ag-grid

vue-router