Bootstrap 5.3 Offcanvas Navbar点击导航项关闭时报错this._config未定义

你遇到的this._config is undefined错误，是因为给<li>标签添加data-bs-toggle="offcanvas"时，没有同时指定data-bs-target属性。Bootstrap的Offcanvas组件要求触发元素必须通过data-bs-target（或href）明确指向对应的Offcanvas容器，否则初始化时无法找到目标实例，进而导致配置项_config未定义。

另外，<li>本身并不是Bootstrap设计的Offcanvas触发元素，直接给它加data-bs-toggle属于非常规用法，虽然能触发关闭，但会引发内部初始化错误。

推荐两种可行的解决方式，优先选择方案一（适配Vue路由场景）：

方案一：通过JavaScript手动关闭（推荐） #

利用Bootstrap提供的Offcanvas实例方法，在点击导航项时手动关闭侧边栏，这种方式更适配Vue的路由跳转逻辑，也避免了data属性的冲突问题。

1. 给router-link添加点击事件：

<li class="nav-item" v-for="route in visibleRoutes">
  <router-link class="nav-link" :to="route.path" @click="closeOffcanvas">
    {{ route.meta.title }}
  </router-link>
</li>

2. 在Vue组件的methods中实现关闭逻辑：

methods: {
  closeOffcanvas() {
    // 获取Offcanvas容器元素
    const offcanvasEl = document.getElementById('offcanvasNavbar');
    // 获取已初始化的Offcanvas实例
    const offcanvasInstance = bootstrap.Offcanvas.getInstance(offcanvasEl);
    // 若实例存在则调用hide方法关闭
    if (offcanvasInstance) {
      offcanvasInstance.hide();
    }
  }
}

方案二：修正data属性配置（临时应急） #

如果想继续用data属性的方式，需要给<li>补充data-bs-target属性，明确指向你的Offcanvas容器ID，这样Bootstrap能正确找到目标实例，不会再抛出错误：

<li class="nav-item" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" v-for="route in visibleRoutes">
  <router-link class="nav-link" :to="route.path">{{ route.meta.title }}</router-link>
</li>

不过这种方式不推荐，因为<li>并非标准的Offcanvas触发元素，后续可能引发其他潜在问题。

内容的提问来源于stack exchange，提问作者ThomasE