某些東西不想被漢堡選單隱藏

https://stackoverflow.com/questions/57865851/bootstrap-navbar-keeping-some-items-while-collapsing

https://stackoverflow.com/questions/50099647/bootstrap-4-navbar-keep-section-on-right-even-when-toggled/50099708#50099708

<nav class="navbar navbar-expand-lg bg-3">
    <div class="container-fluid bg-3 align-items-baseline">
      <a class="navbar-brand navbar-text Serif-TC fw-bolder nature-1 fs-3" href="#">Tea</a>

      <button
        class="navbar-toggler order-first"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarText"
        aria-controls="navbarText"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- 右側 -->
      <div class="order-lg-last order-0">
        <ul class="navbar-nav ml-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <router-link
              to="/userboard/cart"
              active-class="active"
              class="nav-link Serif-TC fw-bolder nature-1 fs-5"
              href="#"
              >購物車</router-link
            >
          </li>
        </ul>
      </div>
      
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <router-link
              to="/info"
              active-class="active"
              class="nav-link Serif-TC fw-bolder nature-1 fs-5"
              aria-current="page"
              href="#"
              >茶資訊</router-link
            >
          </li>
          <li class="nav-item">
            <router-link
              to="/products"
              active-class="active"
              class="nav-link Serif-TC fw-bolder nature-1 fs-5"
              href="#"
              >找茶</router-link
            >
          </li>
        </ul>
      </div>
    </div>
  </nav>

Bootstrap的Navbar自動收起來

然而，由於我的專案使用了Vue CLI + Vue Router

同時我將Navbar獨立成一個元件，因此當我們點選了選單內的連結，跳轉到其他頁面的時候

Vue並不會重新渲染Navbar元件，因此選單卻不會自己收起來

watch: {
    $route(){
          if(document.body.offsetWidth < 992){
              this.$refs.navbarBtn.click();
          }
    }
}

使用watch來直接watch $route，當$route發生改變時，便會執行{ }中的程式碼

這裡用

document.body.offsetWidth

來得到螢幕寬度，而992正是Bootstrap的lg

因此

if(document.body.offsetWidth < 992){...}

這段的意思就是，當Bootstrap Navbar變成漢堡選單時，執行{ }內的程式碼

而我做的事情也非常簡單，就是再按一次按鈕