Question

我如何在Kendo Grid中使用<router-link to="/detail/1">Details</router-link>？我想使用网格中普通链接的标准逻辑，而无需在单击时重新加载整个页面。我尝试在router-link中使用带有模板的网格，但是它不起作用。控制台中也没有错误。

Example on Stackblitz

更新2018年10月24日

Kendo Grid for Vue正在为jQuery初始化一个普通的Kendo Grid小部件。因此，所有模板都将在运行时进行评估，之后可能无法评估路由或解决路由器链接元素。

如果您有相同的问题，请为该建议投票 vue native implementation

Answer 1

确实，您不能在kendo模板中使用router-link。但是我想我会提供一种替代方法来达到相同的结果。

您可以通过调用xyz / detail / $ {id} router.push({ path:重定向到新页面using the programmatic way。

用实现点击事件的command替换模板，然后从那里调用})。

我用一个有效的示例更新了your example on slackblitz。

带有命令col的Kendo网格

route.push

数据对象中的命令数组。

<kendo-grid ref="grid"
            :height="550"
            :data-source-ref="'datasource1'"
            :sortable="true">
    <kendo-grid-column :field="'ProductID'"
                       :title="'Product ID'"></kendo-grid-column>
    <kendo-grid-column :field="'ProductName'"
                       :title="'Product Name'"></kendo-grid-column>
    <kendo-grid-column :field="'Link'" :template="linkTemplate1"></kendo-grid-column>
    <kendo-grid-column :command="detailsLink"></kendo-grid-column>
</kendo-grid>

我如何在Kendo网格（Vue.js）中使用路由器链接

1 个答案: