저는 nuxt와 bootstrap을 사용하여 탐색용 사용자 정의 호버 드롭다운 메뉴를 만들고 있습니다. 내가 겪고 있는 문제는 내 탐색 하위 메뉴 NuxtLinks가 Nuxt 블록 내의 애플리케이션 콘텐츠를 원활하게 변경하는 대신 전체 페이지를 새로 고치는 것입니다. 탐색 모음은 default.vue 레이아웃에서 동적으로 생성되며 콘텐츠를 래핑하는 NuxtLink와 함께 b-dropdown-hover 구성 요소를 사용합니다. 이러한 링크/앵커에 대한 페이지가 완전히 새로 고쳐지는데 내 b-navbar-브랜드 이미지가 원활하게 전환되는 이유는 무엇입니까? 죄송합니다. 저는 Nuxt를 처음 사용합니다. ~1:35:00의 이 비디오는 제가 하려는 작업을 보여줍니다.

components/BDropdownHoverRight.vue

layouts/default.vue

<template>
  <nuxt-link :to="aTo">
    <div class="ddr-top" @mouseover="onOver1($event.target)" @mouseleave="onLeave1($event.target)">
      <b-dropdown ref="dropdown_ddr" :text="cText" class="m-md-2 ddr">
        <slot></slot>
      </b-dropdown>
    </div>
  </nuxt-link>
</template>

<script>
export default {
  name: 'BDropdownHoverRight',
  props: {
    cText: {
      type: String,
    },
    aTo: {
      type: String,
    },
  },
  methods: {
    onOver1(t) {
      if (t.nodeName === 'DIV') {
        console.log(t)
        console.log(t.nodeName)
        let num_child_nodes = 0
        try {
          if (t.querySelectorAll(':scope > ul')[0].getElementsByTagName('div').length >= 0) {
            num_child_nodes = t.querySelectorAll(':scope > ul')[0].getElementsByTagName('div').length
          }
        } catch (e) {
          if (t.querySelectorAll(':scope > div > ul')[0].getElementsByTagName('div').length >= 0) {
            num_child_nodes = t.querySelectorAll(':scope > div > ul')[0].getElementsByTagName('div').length
          }
        }

        if (num_child_nodes > 0) {
          try {
            t.querySelectorAll(':scope > div > ul')[0].style.display = 'block'
          } catch (e) {
            try {
              t.querySelectorAll(':scope > ul')[0].style.display = 'block'
            } catch (e) {}
          }
        }
      }
    },
    onLeave1(t) {
      try {
        t.querySelectorAll(':scope > div > ul')[0].style.display = 'none'
      } catch (e) {
        try {
          t.querySelectorAll(':scope > ul')[0].style.display = 'none'
        } catch (e) {}
      }
    },
  },
}
</script>