克隆的 router-link 应该加载到子 router-view 但它也会重新加载主 router-view

Question

我对带有 vue-router 的 VueJS 和 datatables.net 有疑问。我想要实现的是在我的数据 table 中为每个条目获取编辑按钮。为此，我首先在模板中创建一个对象，例如：

<div class="copy btn-group btn-group-xs" role="group" aria-label="Actions">
  <router-link to="pricelist/edit/" class="btn btn-default">edit</router-link>
</div>

现在我使用 jQuery dataTable，我通过自己创建的 Vue 组件向其发送数据，作为最后一列，我使用操作按钮，例如编辑。要在 table 中重新创建它们，我使用：

data () {
  columnDefs: [
        {
          targets: [6],
          orderable: false,
          searchable: false,
          data: null,
          render: function (data, type, row) {
            var dom = $('.copy').clone(true, true)
            dom.children()[0].href += row.id
            return $(dom[0]).html()
          }
        }
  ]
}

显示按钮，但当我单击它时，它还会重新加载主视图，而不仅仅是内部视图。但是如果我在菜单中放置相同的 link 它会按预期工作；这意味着在不重新加载主视图的情况下在内部路由器视图中打开新路由。如果它有所不同，我也使用命名路由器视图

为什么当我从 data() 中呈现的按钮执行它时它不起作用？

谢谢你的帮助！

routes.js:

path: '/admin',
component: require('./components/admin/admin.vue'),
meta: {},
children: [
  {
    path: 'codelists/pricelist',
    meta: {menu: ['codelists', 'pricelist'], auth: true},
    components: {default: require('./components/admin/codelists/pricelist/list.vue')},
    children: [
      {
        path: 'add',
        meta: {menu: ['codelists', 'pricelist'], auth: true},
        components: {overlay: require('./components/admin/codelists/pricelist/new.vue')}
      },
      {
        path: 'edit/:id',
        meta: {menu: ['codelists', 'pricelist'], auth: true},
        components: {overlay: require('./components/admin/codelists/pricelist/edit.vue')},
        props: { default: true, overlay: true }
      }
    ]
  },
}

menu.js 从它按预期工作的地方开始：

codelists: {
  icon: 'save',
  title: 'Šifranti',
  link: '/admin/codelists/brands',
  elements: {
    pricelist: {
      icon: 'folder',
      title: 'Cenik',
      link: '/admin/codelists/pricelist',
      elements: {addNew: {icon: 'add', title: 'Dodaj', link: 'pricelist/edit/154'}}
    }
}

编辑：也许我可以将 eventHandler 从 router-link 附加到

<a href="'pricelist/edit/' + row.id" class="btn btn-default">edit</a>

但是我没有找到它，所以我可以复制它...以前有人这样做过吗？

Answer 1

最后我将 fnDrawCallback 扩展到 datatables.net 的组件。比起我刚刚重新绑定编程路线，例如：

columnDefs: [
      {
        targets: [3],
        orderable: false,
        searchable: false,
        data: null,
        render: function (data, type, row) {
          return '' +
            '<div id="' + row.id + '" class="edit btn-group btn-group-xs" role="group" aria-label="Actions">' +
            '<a type="button" class="btn btn-default">edit</a>' +
            '</div>'
        }
      }
    ],
    fnDrawCallback: function (oSettings, vue) {
      $('.edit', this).unbind('click')
      $('.edit', this).click(function () {
        vue.$router.push({path: 'units/edit/' + this.id})
      })
    },

克隆的 router-link 应该加载到子 router-view 但它也会重新加载主 router-view

Cloned router-link should load on child router-view but it also reloads main reouter-view

jquery

datatables

vuejs2

vue-router

vuex