使用 BootstrapVue 以编程方式编写导航链接的正确方法

Posted 2023-02-23

【中文标题】使用 BootstrapVue 以编程方式编写导航链接的正确方法

【英文标题】：Right way to compose navigation links programatically with BootstrapVue

【发布时间】：2019-12-11 16:21:48

【问题描述】：

我想使用BootstrapVue 库从路线列表中创建***导航器。应用程序中有路由器链接（常见情况下为计算列表），我需要在循环中的页面上组成一组 b-nav-item 元素。这是我创建的 vue 组件代码：

<template>
    <b-navbar fixed="top" sticky toggleable="lg" variant="success">
        <b-navbar-brand>App</b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
        <b-collapse id="nav-collapse" is-nav>
            <b-navbar-nav>

                <span v-for="item in routes">
                    <b-nav-item :to="item.path">item.label</b-nav-item>
                </span>

            </b-navbar-nav>
        </b-collapse>
    </b-navbar>
</template>

<script>
    define(["Vue"], function (Vue) 
            Vue.component('app-navig-top', 
                template: template,
                data: function () 
                    return 
                        routes: [
                            path: "/home", label: "Home", component_name: "app-home",
                            path: "/sign/in", label: "Sign In", component_name: "app-sign-in",
                            path: "/sign/out", label: "Sign Out", component_name: "app-sign-out",
                            path: "/profile", label: "Profile", component_name: "app-profile"
                        ]
                    
                
            );
        
    );
</script>

这种方法是为 BootstrapVue 编写的吗？

<span v-for="item in routes">
    <b-nav-item :to="item.path">item.label</b-nav-item>
</span>

我需要用span 元素包装b-nav-item，但可能没有span 有更好的方法。

【参考方案1】：

只需在<b-nav-item> 上直接使用v-for，不要忘记指定具有唯一值的key 属性。

<b-nav-item v-for="item in routes" :key="item.path" :to="item.path"> item.label </b-nav-item>