Question

我正在bootstrap html模板中实现vue js ...我面临的问题是在navbar中..

我的代码是

<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”页面重定向到教学大纲但菜单冻结并且没有任何更长时间的崩溃或扩展......然后再次重新加载菜单开始正常工作

请帮助我...提前感谢...如果可能的话，请在jsfiddle中提供一个示例... thankx ..

Answer 1

首先像这样修改你的路由器链接（注意@click.native部分并使用router-link作为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');
      }    
   }
});

这应该可以解决问题！

引导导航栏中的vue js

1 个答案: