документация ag-grid-vue с веб-сайта ag-grid ясно говорит:
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
}
Чего здесь не хватает, так это того, как сделать доступным "корневой" маршрутизатор. Я изучал различные источники и видел, что у многих людей одна и та же проблема, но ни один из них не получил четкого ответа.
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 (), но пока ни один из них не работал.
Спасибо!
Возможно ли, что событие щелчка запускается на другом перекрывающемся элементе dom? Я бы также попробовал использовать Vue provide / inject api.
@thirtydot, большое вам спасибо. Оно работает. Я написал полный ответ с еще одним советом по поддержке поведения при щелчке правой кнопкой мыши.
Похоже, что ag-grid уже исправили это: github.com/ag-grid/ag-grid-vue/issues/1#issuecomment-4306855 17.
подход, предложенный @thirtydot, работает хорошо. Единственным недостатком было то, что пользователь не мог щелкнуть правой кнопкой мыши, но я обнаружил, что вы можете просто определить ссылку href. Поэтому, когда вы щелкаете левой кнопкой мыши, прослушиватель событий использует маршрутизатор. Когда вы щелкаете правой кнопкой мыши и открываете новую вкладку, браузер берет ссылку href.
Вам все равно нужно сделать доступным корневой маршрутизатор. В приведенном ниже примере кода предполагается, что у вас есть код внутри компонента Vue, поддерживающего vue-router, который использует ag-grid, поэтому 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;
}
}
Отлично @kennethc! Создание элемента DOM ссылки с прослушивателем событий в cellRenderer иллюстрирует очень полезный шаблон, выходящий за рамки простого запуска маршрута. Очень полезно!
Это действительно хороший и простой подход к решению проблемы. У меня работает this.router.navigateByUrl()
в Angular.
Вероятно, он должен работать таким образом, но, судя по количеству людей, которые на нем застряли, что-то, вероятно, сломалось. И ag-grid понадобится время, чтобы это исправить. У вас может быть больше шансов использовать этот подход: router.vuejs.org/guide/essentials/navigation.html. С аг-сеткой
cellRenderer
: stackoverflow.com/a/45231951/405015. Дайте мне знать, если это не имеет смысла, и я напишу полный ответ. На самом деле я не использую Vue.js, но он достаточно похож на React для решения этой проблемы.