복제된 라우터 링크는 자 라우터 뷰에 로드되어야 하지만 메인 라우터 뷰도 새로고침됩니다.

복제된 라우터 링크는 자 라우터 뷰에 로드되어야 하지만 메인 라우터 뷰도 새로고침됩니다.

vue-http://datatables.net의 VueJs에 대해 문제가 있습니다.제가 원하는 것은 각 엔터티에 대해 데이터 테이블에 편집 버튼을 가져오는 것입니다.이렇게 하려면 먼저 템플릿에 개체를 만듭니다. 예를 들어 다음과 같습니다.

<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 컴포넌트를 통해 데이터를 전송하고 마지막 열로 edit 등의 작업 버튼을 사용합니다.사용하는 테이블에 다시 작성하려면:

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()
          }
        }
  ]
}

버튼을 클릭하면 내부뿐만 아니라 메인 뷰도 새로고침됩니다.단, 메뉴에 같은 링크를 넣으면 예상대로 동작합니다.즉, 메인 뷰를 새로고침하지 않고 내부 라우터 뷰에서 새 루트를 엽니다.차이가 있는 경우 이름 있는 라우터 뷰도 사용합니다.

data()로 렌더링된 버튼에서 실행해도 동작하지 않는 이유는 무엇입니까?

도와줘서 고마워요!

routes.syslog:

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.menu.module이 정상적으로 동작하는 장소:

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

편집: router-link에서 eventHandler를 연결할 수 있습니다.

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

하지만 난 그걸 복사하려고 샘을 내진 않았어...이런 거 해본 사람 있어?

마지막으로 fnDrawCallback을 datatables.net에서 ocomponent로 확장했습니다.내가 방금 프로그램 경로를 재바인드 했더니:

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})
      })
    },

언급URL : https://stackoverflow.com/questions/46197512/cloned-router-link-should-load-on-child-router-view-but-it-also-reloads-main-reo