[vue] 특정영역 제외 버튼 클릭 시 페이지 이동

vue에서는 라우터를 이용하여 페이지 이동이 일어난다.

1. html 소스 내에서 페이지 이동 소스코드

<td class=" cursor-pointer text-center">
  <router-link v-bind:to="'kyb-main/kyb-detail'">
    <p class="h4 mb-2">
    	<b-icon icon="arrow-right-circle"></b-icon>
    </p>
  </router-link>
</td>

2. html에서 goDetail을 호출하고, javascript에서 라우터에 파라미터까지 태워서 페이지 이동시키기

( 리스트에서 상세페이지로 가는 경우 id를 파라미터로 들고가는 경우가 많음 )

 export default {
        name: "SubmissionTable",

        methods: {
            goDetail( item ) {
            
            	// 여기서 name은 라우터에 정의된 라우트명
                //	내 소스는 멀티페이지라서 페이지 단위가 컴포넌트임
                this.$router.push({ name: 'submission-detail', params: {id: item.submission_id, email: item.email}});
            }
        },
        ...
        
}

3. 특정 영역일 경우 이벤트 바인딩 제외시키기

 export default {
        name: "SubmissionTable",
        
        data () {
        	return {
            	...
            	fields: [
                  { key: "created_at", label: "Submission Date", sortable: true },
                  { key: "email", sortable: true },
                  { key: "submission_id", label: "Submission ID", sortable: true },
                  { key: "data.name", label: "First Name", sortable: true },
                  
                  //tdClass 삽입
                  { key: "aml", label: "AML Status", sortable: true, tdClass: "btn-aml-status" },
                ],
                ...
            }
        },

        methods: {
            goDetail( item ) {
            
            	// 여기서 name은 라우터에 정의된 라우트명
                //	내 소스는 멀티페이지라서 페이지 단위가 컴포넌트임
				if( !event.target.classList.contains( "btn-aml-status" ) ) {
        			this.$router.push({ name: 'submission-detail', params: {id: item.submission_id, email: item.email}});
      			}            
      		}
        },
        ...
        
}

 

 

 

 

 

 

 

html코드 필요 시

<!-- bootstrap vue 이용, :fields속성이 data의  fields를 가리키고 있음 -->
<b-table
              :tbody-tr-class="'custom-table-tr'"
        class="w-100 mx-auto"
        :striped="false"
        :bordered="true"
        :small="true"
        :hover="false"
        :items="items"
        :fields="fields"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        :busy="isBusy"
        :filter="filter"
        :borderless="false"
        :outlined="false"
        :dark="false"
        :fixed="false"
        :no-border-collapse="noCollapse"
        @filtered="onFiltered"
        :head-variant="headVariant"
        :table-variant="tableVariant"
        :current-page="currentPage"
        :per-page="perPage"
        @row-clicked="goDetail"
      ></b-table>