BootstrapVue로 프로그래밍 방식으로 내비게이션 링크를 구성하는 올바른 방법

BootstrapVue로 프로그래밍 방식으로 내비게이션 링크를 구성하는 올바른 방법

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>

포장해야겠다b-nav-item와 함께span요소들, 아마도, 같은 것을 하지 않고도 할 수 있는 더 좋은 방법이 있을 것이다.span.

그냥 사용해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>

참조URL: https://stackoverflow.com/questions/57336647/right-way-to-compose-navigation-links-programatically-with-bootstrapvue