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

【问题标题】：Right way to compose navigation links programatically with BootstrapVue使用 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 有更好的方法。

【问题讨论】：

标签： vue.js vue-component bootstrap-vue

【解决方案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>

【讨论】：