html - 引导导航栏中的 vue js

Question

我在 bootstrap 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>

但问题是，当我重新加载页面时，菜单会正常折叠和展开，因为它应该可以正常工作，但是当我单击子菜单(例如“syllabus1”)时，页面会重定向到 syllabus 但菜单卡住并且没有任何不再折叠或展开......然后再次重新加载菜单开始正常工作

请帮我解决这个问题...提前致谢...如果可能请在 jsfiddle 中提供示例...谢谢..

Answer 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');
      }    
   }
});

这应该可以解决问题!