时间戳

首页 > 解决方案 > 如何使用单击事件导航到另一个带有参数的 vue 路由

laravel - 如何使用单击事件导航到另一个带有参数的 vue 路由

问题描述

我正在使用 bootstrap-table-vue，在操作按钮中，我想触发一个 onClick 事件，该事件将导航到另一条路线。

{
    field: 'action',
    title: 'Actions',
    align: 'center',
    clickToSelect: false,
    render: function(e, value, row){},
    formatter: function (e, value, row){
        return '<a class="btn btn-sm show" data-toggle="modal" data-target="#"><i class="fas fa-edit text-info"></i></a>'
    },
    events: {
        'click .show': function (e, value, row){
            return this.$router.push({name:'tourist-site-details', params: {id:row.id}})
            //return this.router.push({name:'tourist-site-details', params: {id:row.id}})
            //none of the above options work
        },
    }
}

当我单击操作按钮时，没有任何反应

return window.location.assign('/tourist-site/details/'+row.id)

上面的代码虽然有效，但它会刷新页面，我不太喜欢。有什么不对吗？

标签： laravelvue.jsdatatables

解决方案

事件触发器中的函数在全局命名空间中调用，因此您必须首先访问 Vue 实例。

当你实例化它时，首先将你的 Vue 实例分配给一个变量：

var vm = new Vue({
  ...
})

然后从该变量访问它：

events: {
   'click .show': function (e, value, row){
        vm.$router.push('/path/'+value)
    },

工作示例

或者，您可以使用 vue-bootstrap，它允许您在其预定义的插槽中包含 vue 组件：

<b-table>
<template v-slot:cell(action)="data">
   <router-link :to="'/tourist-site/details/'+row.id" class="btn btn-sm show">
      <i class="fas fa-edit text-info"></i>
    </router-link>
</template>
</b-table>

推荐阅读