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

Question

我想使用 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 的情况下做同样的事情.

Answer 1

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

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