如何在 vue 路由中导航到 Bootstrap-vue 选项卡中的特定选项卡？

Posted 2023-02-16

【中文标题】如何在 vue 路由中导航到 Bootstrap-vue 选项卡中的特定选项卡？

【英文标题】：How to navigate to specific tab in Bootstrap-vue tabs in vue routes?

【发布时间】：2019-02-05 00:08:20

【问题描述】：

我正在使用Bootstrap-vue tabs。这是标签的 html：

<b-tabs>
  <b-tab title="Exotic Dogs" href="#dogs">
    <br>Dogs here
  </b-tab>
  <b-tab title="Exotic Cats"  href="#cats">
    <br>Cats here
  </b-tab>

</b-tabs>

这是猫的路线：

        path: '/animals/:id#cats',
        name: 'getCats',
        component: Animals // removed from HTML to simplify
    ,

在组件代码中：

this.$router.replace( name: 'getCats', params:  id: this.$route.params.id )

这将采取：

localhost:3000/animals/234909888#cats

但是狗标签是打开的（第一个标签）而不是猫标签。刷新浏览器也会显示空白页。

如何解决这个问题？

【问题讨论】：

我认为更直观的结构是path: '/animals/cats/:id',

【参考方案1】：

您可以尝试将v-model="tabIndex" 添加到<b-tabs> 标签中，并使用$route.hash 将其设置在mounted() 中。

<b-tabs v-model="tabIndex">
  <b-tab title="Exotic Dogs" href="#dogs">
    <br>Dogs here
  </b-tab>
  <b-tab title="Exotic Cats"  href="#cats">
    <br>Cats here
  </b-tab>

</b-tabs>

export default 
  ...
  data() 
    return 
      tabIndex: 0,
      tabs: ['#dogs', '#cats']
    
  ,
  mounted() 
    this.tabIndex = this.tabs.findIndex(tab => tab === this.$route.hash)
  
  ...

【讨论】：

Richard 我试过了，但没有用，我得到这个。$el 未定义。我正在使用单个文件组件。

确实，这是 Vue 中最令人沮丧的事情之一，某些属性在您期望的时候不可用。在这种情况下，我们可以切换到使用mounted() 钩子——但即使这样b-tabs 还没有完成渲染，所以querySelectorAll 无法在选项卡上找到hrefs。解决方法是明确data() 中的选项卡。无论如何，这是一个更好的解决方案，因为逻辑更简单。

这对我来说很有效，我很担心，因为它说 href 的文档已被弃用。我的路径是 "/prefs#lt" 。请注意其他开发人员，选项卡数组中的“#”对于匹配工作很重要......我的选项卡是。选项卡：[“#lr”、“#lt”、“#ts”、“#cj”、“#cjw”、“#ps”、“#bo”]