筆記:Bootstrap導航與router-link 不和諧

原始版本:

<ul class="nav nav-tabs" >
            <li v-if="is_material_check" id="page_material_check_section" class="active">
                <a href="#material_check_section" data-toggle="tab"> 
                    @language.factory_tab_material_equal
                </a>
            </li>
 </ul>

想改用Vue-Router 所以就有下面的這個初始版本,,由於router-link 是生成 a 標籤直接套上去GG了,效果不如人意

<ul class="nav nav-tabs">
            <li v-if="is_material_check" id="page_material_check_section" class="active">
                <router-link href="#material_check_section" data-toggle="tab" v-bind:to="{name:'material_check'}">
                    @language.factory_tab_material_equal
                </router-link>
            </li>
</ul>

期間用雙重 a 標籤嵌套等等等方式，最後找到了如下的解決方式

<ul class="nav nav-tabs">
            <router-link v-bind:to="{name:'material_check'}" tag="li" active-class="active" v-if="is_material_check" id="page_material_check_section">
                <a href="#">@language.factory_tab_material_equal</a>
            </router-link>
</ul>

想法：利用router-link   tag    指定它生成   li   標籤

          再利用 active-class 指定 路由激活時 class=“active” 剛好對應 bootstrap 導航欄激活狀態