VUE JS在引導導航欄

Question

我實現VUE JS在引導HTML模板......我面臨的問題是，在導航欄..

我的代碼是

<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部分，並使用路由器鏈路爲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'); 
     }  
    } 
}); 

這應該做的伎倆！