循序渐进BootstrapVue，开发公司门户网站（5）--- 使用实际数据接口代替本地Mock数据

<div>
  <!-- Image and text -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
      BootstrapVue
    </b-navbar-brand>
  </b-navbar>
</div>

// 导航菜单
export const navbarlist = [{
    name: '网站首页',
    link: '/',
    children: []
  },
  {
    name: '产品解决方案',
    link: '/product',
    children: [ ]
  },
  {
    name: '行业解决方案',
    link: '/business',
    children: []
  },
  {
    name: '技术与支持',
    link: '/technology',
    children: [{
        name: '业务培训范围',
        link: '/technology',
        children: []
      },
      {
        name: '服务体系',
        link: '/technology',
        children: []
      },
      {
        name: '在线反馈',
        link: '/technology',
        children: []
      }
    ]
  },
  {
    name: '公司新闻',
    link: '/news',
    children: []
  },
  {
    name: '关于我们',
    link: '/about',
    children: [ ]
  }
]

listNavibar(params) {
    return request({
      url: '/api/portal/listnavibar',
      method: 'get',
      params
    })
  }

<b-navbar toggleable="lg" type="dark" variant="dark" class="active2" :class="{active: showNavbarBg}">
      <div class="container">
        <!-- logo -->
        <b-navbar-brand to="/">
          <img :src="site.icon" class="mr-2" alt="logo" style="height:40px;width:auto">
          {{ site.title }}
        </b-navbar-brand>
        <!-- 切换按钮 -->
        <b-navbar-toggle target="nav-collapse" :class="{active: showCollaps}" />
        <!-- 实际导航连接 -->
        <b-collapse id="nav-collapse" v-model="showCollaps" is-nav>
          <b-navbar-nav class="ml-auto">
            <div v-for="(item, index) of navBarList" :Key="index">
              <b-nav-item v-if="item.children.length <= 0" :to="item.link" :active="$route.path === item.link">
                {{ item.name }}
              </b-nav-item>
              <template v-else>
                <b-nav-item-dropdown right @show="handleShowDrop">
                  <template v-slot:button-content>
                    <span :class="{active: $route.path.includes(item.link)}" @click="handleNavbarClick(item, '', $event)">{{ item.name }}</span>
                  </template>
                  <!-- 子菜单 -->
                  <b-dropdown-item v-for="(ite, ind) of item.children" :key="ind" @click="handleNavbarClick(ite, ind, $event)">{{ ite.name }}
                  </b-dropdown-item>
                </b-nav-item-dropdown>
              </template>
            </div>
          </b-navbar-nav>
        </b-collapse>
      </div>
    </b-navbar>

import portal from '@/api/test/portal'

var param = {}
      // 菜单信息
      portal.listNavibar(param).then(data => {
        // console.log(data)
        this.navBarList = data.result
      })

import portal2 from '@/api/system/portal'

portal2.listNavibar(param).then(data => {
    console.log(data)
     this.navBarList = data.result
  })