引导导航栏中的 vue js答案

【问题标题】：vue js in bootstrap navbar引导导航栏中的 vue js
【发布时间】：2017-08-01 09:33:03
【问题描述】：

我正在引导 html 模板中实现 vue js...我面临的问题是在导航栏中..

我的代码是

<router-link tag="li" to="#">
     <a><i class="fa fa-book" aria-hidden="true"></i> <span class="nav-label">Syllabus</span><span class="fa arrow"></span></a>
     <ul class="nav nav-second-level collapse">
         <router-link tag="li" to="/syllabus 1">
                <a> Syllabus</a>
         </router-link>
         <router-link tag="li" to="/syllabus/topic">
                <a>Syllabus Topic</a>
         </router-link>
      </ul>
 </router-link>

我也尝试过使用

<li>
         <a><i class="fa fa-book" aria-hidden="true"></i> <span class="nav-label">Syllabus</span><span class="fa arrow"></span></a>
         <ul class="nav nav-second-level collapse">
             <router-link tag="li" to="/syllabus">
                    <a> Syllabus 1</a>
             </router-link>
             <router-link tag="li" to="/syllabus/topic">
                    <a>Syllabus Topic</a>
             </router-link>
          </ul>
 </li>

但问题是，当我重新加载页面时，菜单会正常折叠并展开，因为它应该可以正常工作，但是当我单击子菜单（例如“教学大纲 1”）时，页面会重定向到教学大纲，但菜单会冻结并且没有任何更长的折叠或展开...然后再次重新加载菜单开始正常工作

请帮助我...在此先感谢...如果可能，请在 jsfiddle 中提供一个示例...谢谢 ..

【问题讨论】：

stackoverflow.com/a/45108393/392102

标签： html vue.js bootstrap-4 vue-router

【解决方案1】：

首先像这样修改你的路由器链接（注意@click.native 部分并使用路由器链接作为a 标签）

<router-link to="/syllabus 1" @click.native="closeMenu($event)">

然后在您的主应用程序中，使用以下代码创建一个名为 collapse 的函数

let app = new Vue({
   methods: {
      closeMenu($event) {
          $($event.currentTarget).closest('.navbar-collapse').collapse('hide');
      }    
   }
});

这应该可以解决问题！

【讨论】：