如何在点击router-link时隐藏vue3中的bootstrap offcanvas？

Answer 1

你必须使用构造函数创建一个offcanvas实例，例如：

methods: {
  hideThisCanvas(){
    let myOffcanvas = document.getElementById('offcanvasDarkNavbar')
    let bsOffcanvas = bootstrap.Offcanvas.getInstance(myOffcanvas);
    bsOffcanvas.hide();
  }
}

或

methods: {
      hideThisCanvas(){
        let myOffcanvas = document.getElementById('offcanvasDarkNavbar')
        let bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
        bsOffcanvas.hide();
      }
    }

因为使用传统的文档选择器对于现代 JS 框架来说并不理想，所以你可以像这样为你的 offCanvas 创建一个引用。

<div ref="offCanvas" class="offcanvas offcanvas-start" tabindex="-1" id="example_canvas">

然后按照你应该的方式在你的 vuejs 函数中访问它

示例

let myOffcanvas = this.$refs.offCanvas;

你的最终方法应该是这样的

methods: {
      hideThisCanvas(){
        let myOffcanvas = this.$refs.offCanvas;
        let bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
        bsOffcanvas.hide();
      }
    }

我对 vuejs 不太了解，但我希望你现在有了概念，它对你有帮助。

Answer 2

“点击”切换器也有效。创建您的路由器链接通过 @click 调用的函数：

function closeOffcanvas() {
   document.getElementById('offcanvasToggler').click()
}

切换器必须有 id：

<button id="offcanvasToggler" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas">

路由器只是调用函数来引发点击：

<router-link :to="{ name: 'home'}" class="nav-link" @click.prevent="closeOffcanvas()">

我确信存在上面提到的使用 ref 的更好的类似 vue 的代码。这对我来说是有效的。 如果有的话，您还可以参考关闭按钮，即带有

的按钮

data-bs-dismiss="offcanvas"