Nuxt-link는 Bootstrap-vue를 사용하여 페이지 문제를 새로 고칩니다.

Question

저는 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>

Answer 1

여기에는 관련 없는 코드가 많이 있습니다. 제대로 포맷하는 시간을 가졌습니다. 다음번에는 직접 작업해 보세요(흥미로운 부분만 형식화하고 입력하세요).

또한 영상 자체에서 이미 문제 해결 방법에 대한 답변을 제공하고 있습니다. 이번 영상에서는 a 和 nuxt-link 태그의 차이점에 대해 논의하고 있습니다.

이것은 Vue 문서의 부트스트랩 부분과 관련이 있으며,

볼 수 있습니다.

그래서 이런 걸 사용해야 해요

으아악

또한 귀하의 코드가 영상과 매우 다른 것을 발견했습니다. querySelector를 사용하면 안 됩니다. Nuxt 구성 요소를 가져올 필요가 없으며 여러 ESlint 경고/오류가 발생합니다.

모든 것을 뒤섞기보다는 학습의 한 부분에 집중하는 것이 좋습니다. 더 나아가고 싶은 것은 괜찮지만, 새로운 개념(Vue/Nuxt)을 많이 배울 때 너무 많은 추상화에 빠지지 않도록 주의하세요.

---

그런데, Nuxt를 계속 배우고 싶다면 다음을 확인하세요: https://masteringnuxt.com/ (Nuxt Ambassadors 및 Vue 생태계의 다른 유명 인사들이 제작)

Nuxt로 프로젝트 생성을 즐겨보세요!