笔记: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 导航栏激活状态