单击路由器链接时如何在 vue3 中隐藏 bootstrap offcanvas？答案

【问题标题】：How to hide bootstrap offcanvas in vue3 when router-link is clicked?单击路由器链接时如何在 vue3 中隐藏 bootstrap offcanvas？
【发布时间】：2023-02-16 00:17:16
【问题描述】：

美好的一天，当我点击里面的链接时，我想隐藏 bootstrap-5/Offcanvas。这是 Offcanvas：

  //Button activate Offcanvas
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar"
          aria-controls="offcanvasDarkNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  //Offcanvas
  <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar"
       aria-labelledby="offcanvasDarkNavbarLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Menu</h5>
    </div>
    <div class="offcanvas-body">
      <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
        <li class="nav-item">
          <router-link to="/about" class="nav-link link-info align-middle px-0">
            <i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>

在官方文档中，他们说：

您可以使用构造函数创建一个 offcanvas 实例，例如： var myOffcanvas = document.getElementById('myOffcanvas') 或者 var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

然后使用方法“隐藏”。我尝试在路由器链接中使用 @click="hideThisCanvas" 然后
methods: {
  hideThisCanvas(){
    let myOffcanvas = document.getElementById('offcanvasDarkNavbar')
    myOffcanvas.hide();
  }
}
但它给出了错误myOffcanvas.hide is not a function。请帮忙！

【问题讨论】：

最好的方法可能是使用一些基于状态的东西，比如 bootstrap-vue：bootstrap-vue.org 使用文档选择器不是任何现代 JS 框架 tbh 的方法。

标签： javascript vuejs3 hide bootstrap-5

【解决方案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 创建一个 ref。

<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 了解不多，但我希望你现在已经有了概念，它对你有帮助。

【讨论】：

不要在基于状态的框架中使用查询选择器。
非常感谢，它有效。完全：从“bootstrap/dist/js/bootstrap”导入 * 作为引导程序 export default { 名称：“MyNavbar”，方法：{ hideThisCanvas(){ 让 myOffcanvas = document.getElementById('offcanvasDarkNavbar') 让 bsOffcanvas = bootstrap.Offcanvas。 getInstance(myOffcanvas); bsOffcanvas.hide(); } } } </脚本>
@kissu 我同意你的看法，在任何现代 JS 框架中使用文档选择器都不是理想的，如果它是 Reactjs 我会使用 useRef 钩子但这是 vuejs 我假设他知道如何去做。我对vuejs了解的不多
你在 React 中有 useRef，你在 Vue 中也有 $ref，目的相同。出于完全相同的原因，没有理由在这里使用其他任何东西。
@kissu 我已经更新了我对它在 Vue 中应该是什么样子的回答

【解决方案2】：

我不想导入引导程序，所以我不得不使用最简单的方法来关闭 offcanvas。

如果单击链接时案例刚刚关闭而没有在页面中重新加载组件。

找到的最佳选择是data-bs-dismiss="offcanvas">

<RouterLink class="nav-link" data-bs-dismiss="offcanvas" to="/">Home</RouterLink>

【讨论】：